Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #16075

    Hello,

    I am wanting to change the color styling of my H1, H2… text in the Choices theme. I have set up a child theme and I want to make the changes directly in the CSS rather than in “Quick CSS” in the WP backend.

    To start, I’ve copied the CSS files from Choices to a new folder in my child theme:

    Child Theme / CSS

    Q.1: The problem I’m having is I can’t figure out the simple stuff, like where to change H1, H2, etc. I can’t even find the body color in these CSS files to change it to red (just to get my barrings and play around with it). Any pointers would be greatly appreciated!

    Background and what I am really trying to accomplish:

    I am currently using a modified version of your Twicet template on another site (a loyal Kriesi fan ;)). I am trying to replicate the modification we made in Twicet so that all pages/posts that are children of a certain parent get H1, H2… = green; and all pages posts that are children of another parent get H1, H2… = purple. It might sound confusing, but we are using colored headings to help differentiate/brand different products (you can see it in action at mapdiva.com). For our Twicet modification, we added code to the header that looks for a parent then assigns styles to it and all its children, sort of like this:

    <style type=”text/css”>

    <? if ($parent == 102) { // productA… ?>

    #inner_content h1 {

    color: #b8058e;

    font-weight: normal;

    border-bottom: 1px solid #BBBBBB;

    margin-bottom: 20px;

    }

    #2 What would the equivalent of Twicet’s basic and common CSS styles #inner-content be in Choices?

    Thank you so much for your guidance.

    - Jill

    #90049

    Hi Jill,

    Here are the list of stylesheets with descriptions (this will help you find the code faster):

    css/grid.css – loads the default grid with all widths for the different screens

    css/base.css- loads the css reset & default styling for html elements like the anchor tag, ul, li, and some wordpress generated classes (eg galleries)

    css/layout.css – theme layout for the default screen size and media queries for smaller screen estates

    css/slideshow.css- theme layout for the various slideshows

    css/shortcodes.css – loads the css rules for the theme shortcodes

    css/dynamic-css.php – a php file that holds all color informations entered within the backend. it is recommended to not edit this file and instead use the custom.css file

    css/custom.css – stylesheet dedicated for user customizations

    You can use firebug (an extension for Chrome and Firefox) that will help you check what css code is used for that particular element in the page. Hope this helps. :)

    Regards,

    Ismael

    #90050

    Hi Ismael,

    Thanks, I saw that list in the documentation and have been poking around. I still have a basic question:

    How do I change the color of my h1, h2, h3 post body headings to red? How do I change the h1, h2, h3 colors in the CSS, not through the WP back-end “Quick CSS”? Which file and which lines of code should be modified?

    thanks,

    Jill

    #90051

    Hi Jill,

    You need to add all customizations to the custom.css found in the /css/ folder. Doing that will override the default styles. Here are the codes.

    .main_color h1, .main_color h2, .main_color h3, .main_color h4, .main_color h5, .main_color h6 {
    color: #222222;
    }

    If you want each heading to have a separate color then you’ll need to separate them out.

    Regards,

    Mya

    #90052

    thank you!

    #90053

    Hey,

    Glad we could help.

    Regards,

    Ismael

Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘Changing Font body, h1, h2, etc. in Choices (Child) theme CSS’ is closed to new replies.