Different colour page backgrounds - by ashrodda

This topic has 21 replies, 3 voices, and was last updated 8 years, 7 months ago ago by Jack Richardson

  • Avatar: ashrodda
    ashrodda
    Participant
    August 26, 2015 at 13:50

    Hi

    I need my home page background to stay black and on other pages where there is a lot of text (for example the blog pages), the background needs to be white. I need the footer and headers to remain black as this will affect the logo and nav menu. How do I set this up please?

    I would also like the background of the sticky header to be black – currently the logo and menu aren’t displaying when the sticky header appears because the background is white and so is the text etc.

    Thanks.

    Please, contact administrator
    for this information.
    20 Answers
    Avatar: ashrodda
    ashrodda
    Participant
    August 26, 2015 at 13:53

    I also just noticed that the logo seems to distort in the sticky header when viewing on an iPad 3rd gen.

    Avatar: Eva
    Eva Kemp
    Support staff
    August 26, 2015 at 14:18

    Hello,

    I’ve changed Site Background color to white in Theme Options > Color Scheme.
    I’ve added this code for fixed header background and footer background in Theme Options > Custom CSS > Global Custom CSS:

    .fixed-header-area {
        background-color: black;
        border-bottom: 1px solid black;
    }
    .footer-top.footer-top-1, .container-transparent .copyright {
       background-color: black !important;
    }

    and added this code in CSS block of Visual Composer editor:
    http://storage2.static.itmages.com/i/15/0826/h_1440594866_7790511_daf44f61fe.png

    Please check the site now.

    Regards,
    Eva Kemp.

    Avatar: ashrodda
    ashrodda
    Participant
    August 26, 2015 at 19:44

    Hi Eva

    It looks great, thank you! In line with the background colour changes, I have changed my typography settings back to default mostly to accommodate the white background now. There are a few areas that I am still battling with:

    1) paragraph font colours – where does one change this? I am considering making all the body text black so it is legible.
    2) The text on blog pages (posts) is VERY light and hard to read – how do I change this?
    3) The side bar on the blog pages has headings and text which are still white in colour and I can’t find where to change this – these need to go back to black.

    Many thanks.

    Please, contact administrator
    for this information.
    Avatar: ashrodda
    ashrodda
    Participant
    August 26, 2015 at 19:46

    I forgot to mention, the headings in the contact form are also white in colour and I’m assuming they must be linked with the text used in the blog side bar – I also need to ensure this text is black as well.

    Thanks!

    Avatar: Eva
    Eva Kemp
    Support staff
    August 27, 2015 at 09:58

    Hello,

    1./2. Please add this code in Global Custom CSS:

    p {
       color: black !important;
    }

    3. use this css code:

    .sidebar-widget .widget-title span, .widget_categories a {
        color: black !important;
    }

    4. For contact form use this code:

    .contact-form label {
       color: black;
    }

    Regards,
    Eva Kemp.

    Avatar: ashrodda
    ashrodda
    Participant
    August 27, 2015 at 15:38

    Wonderful thank you – almost 100% success. The only thing that is still not right yet is the blog text – it still looks very light. We can always modify the font in each blog post but it would be better if it automatically shows correctly, thanks!

    Avatar: ashrodda
    ashrodda
    Participant
    August 27, 2015 at 15:49

    One more thing as per above: #82436
    I see the logos in the sticky header are still distorting on iPad and iPhone. How do we fix this?

    Thanks.

    Avatar: Eva
    Eva Kemp
    Support staff
    August 27, 2015 at 16:14

    Hello,

    Try to increase font weight with this css code:

    .content-article p {
        font-weight: bold;
    }

    Could you please show a screenshot of the issue with logo?

    Thank you.

    Regards,
    Eva Kemp.

    Avatar: ashrodda
    ashrodda
    Participant
    September 7, 2015 at 12:36

    Thanks for the last reply. Changing the weight makes the paragraph text bold which looks a bit aggressive, like the blogger is shouting. I have a screen shot where I have highlighted the different text areas – how do I upload this screenshot on here? I don’t see an attachment button anywhere on this reply box.

    Point 1 shows the “Posted on…” text – this is still very light and needs to change along with the paragraph text. I noticed on an ipad it shows better but not clearly on my Imac screen.

    Is it also possible to please remove the author from each post – my client doesn’t want it to say posted “by admin/o”.

    Point 3 shows the paragraph text, now bold but I would prefer it to look like the text in the sidebar by point 2 – still clear but not bold.

    Avatar: ashrodda
    ashrodda
    Participant
    September 7, 2015 at 12:40
    Please, contact administrator
    for this information.
    Avatar: ashrodda
    ashrodda
    Participant
    September 7, 2015 at 12:45

    Here are two screenhots of the sticky header which is distorting on iPad and iPhone.

    Please, contact administrator
    for this information.
    Avatar: ashrodda
    ashrodda
    Participant
    September 7, 2015 at 12:55

    Here is also another screenshot showing the main home page of the site on an iPhone 6 and you’ll see the telephone number and social icons in the header are not appearing but they are showing on my desktop iMac and on my iPad 3rd gen.

    The strange thing is my client has a newer model iPad than me (bought in 2014) and she can’t see the actual number or the social icons in the header on her iPad. It says “contact us now” and nothing after that is visible.

    Please, contact administrator
    for this information.
    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    September 7, 2015 at 16:52

    Hello,

    Regarding your first screenshot about post article:
    1. Add this code in Global Custom CSS:

    .meta-post {
      color: #767676 !important;
    }

    Write your color value.

    2. To hide author name you need edit the file wp-content/themes/woopress/content.php and comment the line 81 <?php _e('by', ETHEME_DOMAIN);?> <?php the_author_posts_link(); ?>

    3. For the text font in post articles use this css code:

    .content-article p {
        font-weight: normal;
        font-size: 14px;
        font-family: Average Sans-serif;
    }

    4. For logo please try to use this code in child style.css:

    @media only screen and (max-width: 992px) {.fixed-header-area .header-logo img {
        max-height: 100%;
    }}

    5. Add this code in child style.css:

    @media only screen and (max-width: 480px) {
    .tbs.blog-description {
        display: block !important;
        width: 100%;
    }}

    Best regards,
    Jack Richardson.

    Avatar: ashrodda
    ashrodda
    Participant
    September 7, 2015 at 21:49

    1. Worked, thank you! I have just noticed that the picture comments are also inconsistent: “BEFORE” underneath pic 1 seems to be affected by the paragraph text and ‘8 weeks after’ under pic 2 is very light – very weird because they’re both captions? See attached screenshot…

    2.I think I did this correctly. It is now only showing /o which I assume is the number of replies for the post. Can we get rid of this too? When I clicked on the post and went into the post page, I saw the ‘by admin’ is still there (even though it is gone on the main blog page. Where in the code can we edit this?

    3.This looks much better (visible now but not shouting) however the font that is showing as the paragraph text looks like a serif script and your code says ‘sans-serif’ – I would prefer sans-serif as it looks more modern and in line with the text in the side menu. Any idea why it’s not showing as sans-seif?

    4. & 5. Please forgive all the questions, I’m still learning. How do I access the child style css? Can I do it in the admin panel or do I need to add the code to the bottom of the style.css file using ftp?

    Please, contact administrator
    for this information.
    Avatar: ashrodda
    ashrodda
    Participant
    September 7, 2015 at 22:01

    Ok, ignore points 4 & 5 – I accessed the file via ftp and it worked – yay! Thanks very much!!

    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    September 8, 2015 at 08:10

    Hello,

    1. Please pay attention how you wrote the post: http://storage2.static.itmages.com/i/15/0908/h_1441695149_1421744_74d0d8257c.png
    One image has shortcode “caption” and other one has “dl” tag. Write the content for both images similarly to have the same font style.

    2. To hide comments number you need edit the file wp-content/themes/woopress/content.php and comment the line 82

    <?php // Display Comments 
    if(comments_open() && !post_password_required()) {
    echo ' / ';
    comments_popup_link('0', '1 Comment', '% Comments', 'post-comments-count');
    }
    ?>

    3. Please edit the code and change it to:

    .content-article p {
        font-weight: normal;
        font-size: 14px;
        font-family: sans-serif;
    }
    .sidebar-widget ul li a {
        font-family: sans-serif;
    }

    Best regards,
    Jack Richardson.

    Avatar: ashrodda
    ashrodda
    Participant
    September 8, 2015 at 08:44

    Hi Jack

    Thanks for the replies. In response:

    1. My client actually loaded the last post on her ipad while I watched and she added both pics in the media library and entered text in the caption box (in the library) for both. I checked again now in the library and both caption boxes have the emntioned text inside so how did one end up being a caption and the other a dl tag when we didn’t write any code?

    2. Perfect, this is now fixed too, thanks! Did you see my comment above about the fact that the author and replies are still showing on the individual post pages even though we’ve successfully taken them off the main blog page. What lines in the content.php file should I comment for these?

    3. Looks great now, thank you very much!

    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    September 8, 2015 at 10:51

    Hello,

    1. As I see now the issue is resolved:
    http://storage7.static.itmages.com/i/15/0908/h_1441705457_3165102_424ef46d6a.png

    2. Edit also this file wp-content/themes/woopress/single.php in line 94 and comment the code:

    <?php _e('by', ETHEME_DOMAIN);?> <?php the_author_posts_link(); ?>
    <?php // Display Comments 
    if(comments_open() && !post_password_required()) {
    echo ' / ';
    comments_popup_link('0', '1 Comment', '% Comments', 'post-comments-count');
    }
    ?>

    Best regards,
    Jack Richardson.

    Avatar: ashrodda
    ashrodda
    Participant
    September 8, 2015 at 11:19

    Thanks Jack

    1. Yes I just went into the post and re-set up everything but it still is a mystery why it did that to begin with – like I sad we just added captions in the media library originally.

    2. Perfect, thanks!!

    Please feel free to close this ticket, thank you.

  • 1 2
    Viewing 20 results - 1 through 20 (of 21 total)

The issue related to '‘Different colour page backgrounds’' has been successfully resolved, and the topic is now closed for further responses

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.