bring the pixel support forum

1. 

   IanDoreCreative
   Member

   Hi all,

   I know there is a plethora of ways to change colours in the theme but is there a way to specify the colour of H1 and H2 tags without changing the actual text colour on the pages?

   cheers,

   ian

   Posted 1 year ago #
2. 

   admin_btp
   Key Master

   You can do it via CSS rules, something like that:

   
h1, h2 { color: #123456; }


   Posted 1 year ago #
3. 

   IanDoreCreative
   Member

   Cheer for that,

   could you be very specific in exactly where that line of code should go and in what file exactly?

   In the wordpress editor the CSS isn't displayed so I take it I have to do it through FTP?

   I want to be able to change both the H1 and H2 if possible.

   thanks

   Posted 1 year ago #
4. 

   admin_btp
   Key Master

   at the end of the "DICE/css/skins/valley-black.css" file, assuming valley-black is your base skin

   regards,
   Michael

   Posted 1 year ago #
5. 

   IanDoreCreative
   Member

   And what would be the actual line of code please?

   the last bits in the CSS of valley back.css are:

   #footer .background { background-color: #e5e5e5; }
   #footer .background { filter:alpha(opacity=100); -khtml-opacity: 1; -moz-opacity: 1; opacity: 1; }
   #footer { color: #a6a6a6; }
   #footer a { color: #595959; }
   #footer a:hover { color: #000000; }

   So how do I write my new bit in there without it causing trouble? In the next update you should let the user be able to pick the H1 and H2 colours and indeed sizes methinks. Would be very useful.

   thanks,

   ian

   Posted 1 year ago #
6. 

   admin_btp
   Key Master

   Just place your rules at the end of the file (this way you can be sure there are no other rules which may overwrite yours)

   regards,
   Michael

   Posted 1 year ago #
7. 

   admin_btp
   Key Master

   BTW: do you want to make h1 and h2 darker/lighter, smaller/bigger?

   regards,
   Michael

   Posted 1 year ago #
8. 

   IanDoreCreative
   Member

   Hi Michael,

   but what is the specific code? IE the rules?

   Ideally a colour picker for all tags and sizes too.

   cheers,

   ian

   Posted 1 year ago #
9. 

   admin_btp
   Key Master

   
h1, h2 { color: #123456; }


   regards,
   Michael

   Posted 1 year ago #
10. 

    IanDoreCreative
    Member

    Hi Michael,

    the last few lines of the CSS now read:

    #footer { color: #a6a6a6; }
    #footer a { color: #595959; }
    #footer a:hover { color: #000000; }
    h1, h2 { color: #000099; }

    But once its uploaded there is no change. Please advise.

    cheers,

    ian

    Posted 1 year ago #
11. 

    IanDoreCreative
    Member

    Cancel that, I was using the wrong folder!! All sorted.

    Posted 1 year ago #
12. 

    IanDoreCreative
    Member

    Aha but now there is a problem.

    The change is global for the H2 colour and so every H2 is now #000099.

    This means that the pre-header and footer H2 tags ( which were white ) have now been overwritten, even though the body H2 tags were grey.

    Is there way to specify the H2 tag colours just for the Preheader and Footer areas?

    back to square one!!!

    cheers,

    ian

    Posted 1 year ago #
13. 

    admin_btp
    Key Master

    yes, just prepend it with the section id

    
#prefooter h1, #prefooter h1 { color: #123456; }


    Posted 1 year ago #
14. 

    IanDoreCreative
    Member

    Super duper that works a treat. How about specifically for the main page content and sidebar?

    cheers,

    ian

    Posted 1 year ago #
15. 

    admin_btp
    Key Master

    Hi,

    you can use firebug to see your desired path.

    So for the sidebar the path will be:

    
#content .bd .grid .sidebar


    and the CSS rule:
    
#content .bd .grid .sidebar h1 { color: #123456; }


    regards,
    Michael

    Posted 1 year ago #
16. 

    IanDoreCreative
    Member

    Hi Michael,

    tried putting that into the sheet ( see below ) but nothing changed on the sidebar. My bit of code is at the bottom. Please correct it of give me very easy to understand instructions on how to change the colours.

    thanks,

    ian

    /* ----- CONTENT ----------------------------------------------------------------- */
    #content { width: auto; }
    #content { border-top-width: 0px; }
    #content { border-top-color: #000000; }
    #content { border-bottom-width: 1px; }
    #content { border-bottom-color: #d9d9d9; }
    #content { margin-bottom: 0px; }
    #content .background { background-color: #ffffff; }
    #content .background { filter:alpha(opacity=100); -khtml-opacity: 1; -moz-opacity: 1; opacity: 1; }
    #content, #content input, #content select, #content textarea { color: #666666; }
    #content a { color: #ff002a; }
    #content a:hover { color: #000000; }
    #content .meta { color: #b3b3b3; }
    #content .meta a { color: #666666; }
    #content .meta a:hover { color: #000000; }
    #content * { border-color: #d9d9d9; }
    #content .button { background-color: #d9d9d9; }
    #content .progress-bar { border-color: #d9d9d9; }
    #content .button.primary span { background-color: #ff002a; }
    #content .button.primary.small span { background-position: 0 -180px; }
    #content .button.primary.medium span { background-position: 0 -210px; }
    #content .button.primary.big span { background-position: 0 -330px; }
    #content .plus, #content .minus, #content .arrow { background-color: #ff002a; }
    #content .plus, #content .minus, #content .arrow { background-position: 0 -120px; }
    #content .progress-bar-value { background-color: #ff002a; }
    #content .progress-bar-value { background-position: 0 -120px; }
    #content table.pricing th.featured { border-top-color: #ff002a; border-right-color: #ff002a; border-left-color: #ff002a; }
    #content table.pricing tbody td.featured { border-right-color: #ff002a; border-left-color: #ff002a; }
    #content table.pricing tfoot td.featured { border-right-color: #ff002a; border-bottom-color: #ff002a; border-left-color: #ff002a; }
    #content .button.primary span { color: #ffffff; }
    #content .arrow .css-shape { border-color: #ffffff; }
    #content .plus .css-line-hor, #content .plus .css-line-ver { background-color: #ffffff; }
    #content .minus .css-line-hor, #content .minus .css-line-ver { background-color: #ffffff; }
    #content .plus:hover, #content .minus:hover, #content .arrow:hover { background-color: #000000; }
    #content .button.primary:hover span { background-color: #000000; }
    #content .button.primary.small:hover span { background-position: 0 -0px; }
    #content .button.primary.medium:hover span { background-position: 0 -0px; }
    #content .button.primary.big:hover span { background-position: 0 -0px; }
    #content .button.primary:hover span { color: #cccccc; }
    #content .arrow:hover .css-shape { border-color: #cccccc; }
    #content .plus:hover .css-line-hor, #content .plus:hover .css-line-ver { background-color: #cccccc; }
    #content .minus:hover .css-line-hor, #content .minus:hover .css-line-ver { background-color: #cccccc; }
    #content .button.secondary span { background-color: #444444; }
    #content .button.secondary.small span { background-position: 0 -120px; }
    #content .button.secondary.medium span { background-position: 0 -140px; }
    #content .button.secondary.big span { background-position: 0 -220px; }
    #content .button.secondary span { color: #ffffff; }
    #content .button.secondary:hover span { background-color: #000000; }
    #content .button.secondary.small:hover span { background-position: 0 -0px; }
    #content .button.secondary.medium:hover span { background-position: 0 -0px; }
    #content .button.secondary.big:hover span { background-position: 0 -0px; }
    #content .button.secondary:hover span { color: #cccccc; }
    #content .button.tertiary span { background-color: #d6d6d6; }
    #content .button.tertiary.small span { background-position: 0 -480px; }
    #content .button.tertiary.medium span { background-position: 0 -560px; }
    #content .button.tertiary.big span { background-position: 0 -880px; }
    #content .progress-bar-scale { background-color: #d6d6d6; }
    #content .progress-bar-scale { background-position: 0 -320px; }
    #content .button.tertiary span { color: #666666; }
    #content .button.tertiary:hover span { background-color: #000000; }
    #content .button.tertiary.small:hover span { background-position: 0 -0px; }
    #content .button.tertiary.medium:hover span { background-position: 0 -0px; }
    #content .button.tertiary.big:hover span { background-position: 0 -0px; }
    #content .button.tertiary:hover span { color: #cccccc; }
    #content .bd .grid .sidebar h1,h2 { color: #666666; }

    -------------- ----------- -------------

    Posted 1 year ago #
17. 

    admin_btp
    Key Master

    Hi,

    try this:
    
#content .bd .grid .sidebar h1,
#content .bd .grid .sidebar h2 { color: #666666; }


    your previous rule is incorrect, but this will work :)

    regards,
    Michael

    Posted 1 year ago #
18. 

    IanDoreCreative
    Member

    Hi Michael,

    I entered that at the bottom of the code ( removing the other bit ) but no change on the sidebar I'm afraid.

    cheers,

    ian

    Posted 1 year ago #
19. 

    IanDoreCreative
    Member

    My mistake, its supposed to be for the h3 tag, not h2

    cheers,

    ian

    Posted 1 year ago #
20. 

    admin_btp
    Key Master

    thx for sharing

    regards,
    Michael

    Posted 1 year ago #

RSS feed for this topic

Reply

You must log in to post.