Tagged: 

Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • #27318

    Hi,

    Is it possible to use different styles (background colours, etc) in one single website?

    My intention is: the user sees a red background when he enters http://www.forthree.com. If he goes to another section – for example http://www.forthree.com/basketballshop/merchandising/vereine/sv-mammendorf/ – he should see a yellow backgournd on sites underneath this parent. Is this possible?

    Thanks

    Max

    #133608

    Should I clarify my posting?

    #133609

    Hi,

    No you shouldn’t clarify it, since each new post just brings you to the very end of the queue.

    Nice design! i love the top part. Didn’t recognize it for a second. (no joke).

    THe way to do what you want is like this. The css code below is the background color you currently use

    .main_color, .main_color .site-background{
    background-color: #F8F8F8;

    }

    Now what you have to do is look at each page’s <body tag… just right click anywhere, and find <body class=” somewhere in the first 1/3 part of the page. There will be a whole lot of classes listed for the body , for example the page you left a url for (cs mamendorf), has this

    <body id="top" class="archive tax-product_cat term-sv-mammendorf term-3886 stretched open_sans verdana-websave _verdana  woocommerce woocommerce-page js-big-slider-false">

    So you can see this page has certain keywords, (terms) , so for example you can have every page that has keyword sv mammendorf be a brown background by addint #top.term-sv-mammendorf to the background css and changing the color to brown.

    #top.term-sv-mammendorf .main_color,#top.term-sv-mammendorf  .main_color .site-background{
    background-color: brown;

    }

    You can do the same for any of the classes you find in the body of the page and when you start comparing you can find a lot of interesting patterns with pages, archives, posts,categories, shop., etcc…

    Thanks,

    Nick

    #133610

    Ok I tried it and it works great, but the wrong “background” of the site has been changed… I would like to change the part which is now green to antoher colour: http://imgur.com/j61GRKw

    If I change it to

    #top.term-sv-mammendorf .stretch_full,#top.term-sv-mammendorf  .stretch_full .site-background{
    background-color: #FFED00;

    }

    it works fine….

    What I also need: every article within this category should have the same “yellow” background but I cannot find a top.term with each product? http://www.forthree.com/basketball/sv-mammendorf-basketball-sleeveless-shirt-aermellos-schwarz/ what is the top.term here?

    #133611

    Hi,

    If you inspect the site then look for the body tag, you’ll see the term id as one of the class selectors. Please use this

    .term-3886 .container_wrap.template-shop, .term-3886 #wrap_all {
    background: yellow;
    }

    .term-3886 is the body css class of the category sv-mammendorf.

    Regards,

    Ismael

    #133612

    Dear ismael,

    No this was not my intention. Now the background behindbthe products in the overview is coloured again….

    Regards

    Max

    #133613

    Hi Max,

    If you can point out exactly what you are having issues with we can assist but basically you will need to target each page/post/category etc by its overall class selector which is generated on the #top ID. So

    #top.example-class .specific-container {background-color: red;}

    where the .example-class is the selector(s) for that page/category/post-type and the .specific-container is the container you want to change the background for.

    Regards,

    Devin

    #133614

    hi devin,

    let’s take this page http://www.forthree.com/merchandising-sc-rist-wedel/facebookshop/

    I would like to appear everything which is in red right now appear in green. From the top to the bottom! That also includes fonts etc.

    #top.page-id-27636 .??{

    background-color: #006633;

    }

    Can you help me?

    Best regards,

    Max

    #133615

    Hey,

    You can use these:

    body.page-id-27636 {
    background: #006633 center center repeat scroll;
    }

    .page-id-27636 #header .container_wrap_menu, .page-id-27636 #header .cart_dropdown, .page-id-27636 #header .cart_dropdown span {
    background: #006633;
    }

    .page-id-27636 .sub_menu {
    background: #006633 !important;
    }

    .page-id-27636 .main_color .price, .page-id-27636 .main_color .stock, .page-id-27636 #wrap_all .main_color ins {
    color: #006633;
    }

    .page-id-27636 .main_color a, .page-id-27636 .main_color .widget_first {
    color: #006633;
    }

    .page-id-27636 .footer_color .footer_arrow div, .page-id-27636 .footer_color .footer_arrow .inner_content {
    background-color: green;
    border-color: green;
    }

    Please watch this video: http://www.youtube.com/watch?v=dlQrFFwAC_A

    And refer to this link: https://developers.google.com/chrome-developer-tools/docs/elements-styles

    Regards,

    Ismael

    #133616

    hi ismael,

    great I tried it but some parts are still red: http://www.forthree.com/merchandising-sc-rist-wedel/facebookshop/. any clue?

    regards,

    max

    #133617

    Hi Max,

    Please add this code to Quick CSS

    .sub_menu li { background-color: #006633!important; }

    .footer_color .footer_arrow div, #top .footer_color .footer_arrow .inner_content { background-color: none!important; }

    #top .main_menu .menu ul li a { color: #006633; }

    #top .main_color .price { color: #006633; }

    Regards,

    Yigit

    #133618

    dear yigit,

    when I add:

    body.page-id-27636 {
    background: #006633 center center repeat scroll;
    }

    .page-id-27636 #header .container_wrap_menu, .page-id-27636 #header .cart_dropdown, .page-id-27636 #header .cart_dropdown span {
    background: #006633;
    }

    .page-id-27636 .sub_menu {
    background: #006633 !important;
    }

    .page-id-27636 .main_color .price, .page-id-27636 .main_color .stock, .page-id-27636 #wrap_all .main_color ins {
    color: #006633;
    }

    .page-id-27636 .main_color a, .page-id-27636 .main_color .widget_first {
    color: #006633;
    }

    .page-id-27636 .footer_color .footer_arrow div, .page-id-27636 .footer_color .footer_arrow .inner_content {
    background-color: green;
    border-color: green;
    }

    .page-id-27636 .sub_menu li { background-color: #006633!important; }
    .page-id-27636 .footer_color .footer_arrow div, #top .footer_color .footer_arrow .page-id-27636 .inner_content { background-color: none!important; }
    .page-id-27636 #top .main_menu .menu ul li a { color: #006633; }
    .page-id-27636 #top .main_color .price { color: #006633; }

    almost everything gets green, but a small part is missing: see http://www.forthree.com/merchandising-sc-rist-wedel/facebookshop/

    regards,

    max

    #133619

    Hi!

    Use following code fot the arrow:

    #top.page-id-27636 .footer_arrow .inner_content h3, #top.page-id-27636 .footer_color .footer_arrow div, #top.page-id-27636 .footer_color .footer_arrow .inner_content {
    background-color: #c70000;{ background-color: #006633; }

    Regards,

    Peter

    #133620

    hi peter,

    sorry not working. see http://www.forthree.com/merchandising-sc-rist-wedel/facebookshop/

    regards

    max

    #133621

    Hey,

    I edited Dude’s code above. Please use this:

    #top.page-id-27636 .footer_arrow .inner_content h3, #top.page-id-27636 .footer_color .footer_arrow .inner_content {
    background-color: #333333;
    }

    Regards,

    Ismael

    #162316

    wow almost. #333333 is the wrong colour so I changed it to #006633. but why is the small piece of the arrow darker?

    #162758

    Hey,

    You can use this:

    #top.page-id-27636 .footer_arrow .inner_content h3, #top.page-id-27636 .footer_color .footer_arrow .inner_content {
    background-color: #006633;
    }
    
    .page-id-27636 .footer_color .footer_arrow div, .page-id-27636 .footer_color .footer_arrow .inner_content {
    background-color: #006633;
    border-color: #006633;
    }

    Regards,
    Ismael

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

The topic ‘Different css Styles in One Theme’ is closed to new replies.