Custom Style Sheet, few questions

  • So the plan is to make a custom style sheet that will apply to certain pages and will only effect the content area (i.e. the structure, where things appear, certain boxes, etc.) Just a few questions regarding this..

    1) Will this require me to create a new css file for example, (new.css) with all the code in there and within the pages themselves, I will just need to activate the .css file I create?

    2) As I mentioned above, the custom styles will only be affecting the structure/layout of the content which I will be adding into certain pages. $so would I have to specify in the style sheet for instance,

    (Section 1 – alignment, text size/bold etc.)
    (Section 2 – alignment ” ” )

    and from there be able to link (proper term usage?) the content I want to enter according to each style (i.e. Section 1).

    3) The plan is to have the article but with certain boxes or tables along the right edge to add some quick info if the person does not want to read the whole article.

    Hope this is clear what I am planning to do. I have mininmal experience in CSS but learned a great deal since starting using WordPress a few months ago. Just need some guidance. Thank you in advance for any replies.

Viewing 2 replies - 1 through 2 (of 2 total)

  • Hi Mignart,

    I think child themes are now the recommended way to make changes to a theme, particularly if you want to change a few files. I haven’t used them myself but will do this weekend.

    As for custom stylesheets, i’ve only recently started using them on a theme i’m tweaking for a local charity, but I think I might be able to help you out. Here’s what i’m doing at the moment:

    1) Create a new stylesheet: I just duplicated the existing Style.css file, took everything out of it, and called it custom.css

    2) You need to tell your theme to use this stylesheet. In your Header.php file, find the line that calls your existing stylesheet, it will look like the following:

    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

    Enter a new line just below that to call your custom stylesheet:

    <link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/custom.css" type="text/css" media="screen" />

    3) Still in your header.php file, find the <body> tag and amend it to include the wordpress function <?php body_class(); ?> like so:

    <body <?php body_class(); ?>>

    This adds different classes to your body tag allowing you to style different locations of your site. There’s a great explanation of it here.

    4) You can now add the styles to your stylesheet that you want to change. These will override those of the original stylesheet, and any you don’t add will still inherit from the original stylesheet. You can use the classes generated by the <?php body_class(); ?> function to style specific parts of your site.

    I still have much to learn myself, but if you let me know what template you’re using I can see if I can help you get the look you want.

    When I put the above mentioned code in, when I view it with firebug it keeps adding the name of the blog in front of it like this:
    <link media=”screen” type=”text/css” href=”Kyle Mercerhttps://www.kylemercer.com/wp-content/themes/Modest/style-white.css&#8221; rel=”stylesheet”>

    Any ideas on why it would be doing that? In firebug when i take out that name it adds, the new styles show up.
    Any help would be great, thanks!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Custom Style Sheet, few questions’ is closed to new replies.