Radcliffe 2 By Anders Norén :Modifications of header, footer, sidebar, contents, customization and documentations

Radcliffe 2 By Anders NorénAnders Norén is the creator of Baskerville 2 and Radcliffe 2 wordpress theme. Radcliffe 2 is a theme for bloggers who want their content to take center stage. It comes free with wordpress.com. Though I am sharing you the zip of  Radcliffe 2 theme along with child theme which you can download from here and also I am sharing  here some CSS customization using which you can use to make your site beautiful or to give some extra touch of your wish.

Download Radcliffe 2 By Anders Norén Main / Parent theme

Download Radcliffe 2 By Anders Norén Child theme

Or can take my personal help.

 

Question 1: How to change the font size and font family of the contact info showing at the top  of Radcliffe 2 theme

Answer : Try the following code

.contact-info-area {
font-size: 18px !important;
font-family: cursive;
}

Radcliffe 2 top contact info section font, color, hover modification

 

Question 2: How to change the hover font color of top contact info links in Radcliffe 2 theme

.contact-info-area a:hover {
color: blue !important;
}

Question 3: How to change the color of Location, phone, email and Hours icons color in Radcliffe 2 theme

.contact-info-area .icon {
height: 2em !important;
width: 2em !important;
fill: blue !important;
}

 

Question 4: How to change site title’s font color, font size and font family Radcliffe 2 theme

.site-title a {
color: blue !important;
font-family: cursive;
font-size: 5rem !important;
}

Also to change site title’s hover font color, try this code

.site-title a:hover {
color: red !important;
}

Site title color, font family, font size or remove css customization

Question 5 : How to remove the site title from Radcliffe 2 theme

.site-branding-text {
display: none !important;
}

 

Question 6 : How to change the social icons color, hover color and size ( showing right side of top menu)

.site-header .jetpack-social-navigation-svg .icon {
height: 29px;
color: red !IMPORTANT;
width: 28px;
}

Also, if you want to change hover color of the social icons

.site-header .jetpack-social-navigation-svg .icon:hover {
color: blue !important;
}

Question 7 : How to change focused/selected menu background color and border radius in Radcliffe 2 theme

.main-navigation li:hover > a, .main-navigation li.focus > a, .main-navigation li.current-menu-item > a {
background: red !important;
border-radius: 3px;
}

Question 8: How to change the Navigation menu and sub menu font size and font family

.main-navigation a {
font-size: 16px !important;
text-transform: uppercase;
font-family: cursive !important;
}

Homepage spacing reduce

 

Question 9 : How to reduce space below the featured prompt  or between  featured prompt and  Welcome section in homepage

.home header.entry-header {
padding-top: 6px !important;
padding-bottom: 6px !important;
}

*** If you don’t want to show the Welcome Header in the homepage try this code

.home header.entry-header {
display: none !important;
}

Homepage content section width increase

 

Question 10 : How to change  or increase homepage  Welcome  content section width 

.home .entry-content {
width: 90% !important;
}

Question 11: How to change home page featured prompt section button background color and text color

.hero-area .button {
background: red !important;
color: white !important;
}

Question 12: How to change homepage featured prompt button hover background and font color change

.hero-area .button:hover {
background: green !important;
color: white !important;
opacity: 1 !important;
}

radcliffe theme featured prompt section modification

Question 13:  How to change Homepage featured prompt section title’s font color, size and font family in Radcliffe 2 theme

.hero-area-title {
font-size: 40px;
color: red !important;
font-family: cursive !important;
}

Question 14: How to change Homepage Featured prompt content’s font color, size and font family

.hero-area-content {
font-size: 18px;
color: red !important;
font-family: cursive;
}

 

/**************** Page and Post **************** /

Question 15:  How to change single post content section width

.single-post .entry-content, .single-post .entry-footer {

width: 90% !important;
}

single post and page modification

Question 16:  How to remove or  if you don’t want to show page title in individual pages?

.page-template-default .entry-header {
display: none !important;
}

Also

In the same way, if you want to remove post title in single post page

.single .entry-header {
display: none !important;
}

Question 17: How to change Proudly Powered By WordPress and use Your own company and copyright info with year in the footer of Radcliffe 2 theme By Anders Norén

Answer: Go to dashboard, then Appearance > Editor (theme editor). Replace the Red Bordered are with the code i shared below
Proudly Powered by wordpress replaced by company copyright info in Radcliffe 2 theme

<div class="site-info">
			 © Copyright 2018
			<span class="sep"> | </span>
      Your Company name and messages here
			
		</div><!-- .site-info -->

 
If you have any issue feel free to ask me question here in comments section

OR

Pay me some, I will help you for CSS Issue Personally CLICK HERE….

66 Responses to Radcliffe 2 By Anders Norén :Modifications of header, footer, sidebar, contents, customization and documentations

  1. nealumphred says:

    OM

    Here are my questions for the Radcliffe 2 theme.

    HOME PAGE

    1. How do I increase/decrease the space above the site title in the header?

    2.How do I center the Main Menu in the header?

    3. How do I put a horizontal bar as a background behind the Main Menu in the header?

    4. How do I increase/decrease font in the sentence at the top of the page where the address normally goes?

    5. How do I control the font, size, and color of the tagline?

    6. How do I make the featured images on the homepage smaller and separate from another so that the background shows on all four sides of the image?

    7. How do I get rid of the “Featured” notice above INTRODUCTION?

    8. How do I find my social icons?

    9. How do I control size, colors, and fonts of bottom bar (“Proudly Powered”) below the footer?

    INDIVIDUAL POSTS & PAGES

    10. How do I remove the entire header from the post/page and have the featured image fill the top of the page?

    11. How do I increase/decrease the size of the post/page titles?

    12. How do I control the field of color behind the text?

    13. How do I add an EDIT button to each post/page that allows me to enter the post/page from there and make changes?

    14. How do I add a title for Categories and Tags in the lower right below the text?

    15. How do I change “Published by Neal Umphred” to “Author’s Bio”?

    16. How do I add space between the author bio and “View all posts by” below the text?

    17. How do I control the font for “Leave a Reply.”

    18. How do I control the field of color behind the comment box?

    Thanks in advance for your assistance!

    NEAL UMPHRED

    Like

    • Neal,
      your site is showing maintenance mood
      would you mind to make your site live please?
      Om

      Like

    • 1. How do I increase/decrease the space above the site title in the header?

      .header-wrapper {
      padding-top: 20px !important;
      padding-bottom: 20px !important;
      }

      2.How do I center the Main Menu in the header?

      @media screen and (min-width: 1200px){
      .menu-wrapper {
      max-width: 53.8% !important;
      }

      }

      3. How do I put a horizontal bar as a background behind the Main Menu in the header?

      .menu-wrapper {
      background: darkred;
      }

      *** if it is background color you mean, then you may need to change font color too. In such case try this code
      .menu-wrapper a {
      color: white !important;
      }

      4. How do I increase/decrease font in the sentence at the top of the page where the address normally goes?
      .contact-info-address {
      font-size: 18px !important;
      }

      5. How do I control the font, size, and color of the tagline?
      .site-description {
      font-size: 14px !important;
      color: white !important;
      font-family: cursive;
      }

      6. How do I make the featured images on the homepage smaller and separate from another so that the background shows on all four sides of the image?

      .entry-thumbnail {

      margin-bottom: 38px;
      max-height: 550px;
      padding-top: 20px !important;
      background-attachment: fixed;
      }

      Note: background-attachment: fixed; will give the image another look

      7. How do I get rid of the “Featured” notice above INTRODUCTION?

      .entry-meta {
      display: none !important;
      }

      8. How do I find my social icons?

      *** i need to check the dashboard

      9. How do I control size, colors, and fonts of bottom bar (“Proudly Powered”) below the footer?

      .site-info, .site-info * {
      color: white !important;
      font-size: 18px !important;
      font-family: cursive !important;
      }

      INDIVIDUAL POSTS & PAGES

      10. How do I remove the entire header from the post/page and have the featured image fill the top of the page?

      .single #masthead {
      display: none !important;
      }

      11. How do I increase/decrease the size of the post/page titles?

      h2.entry-title, h2.entry-title a {
      font-size: 34px !important;
      }

      12. How do I control the field of color behind the text?

      .archive .entry-header, .blog .entry-header, .search-results .entry-header {
      background: red !important;
      }

      13. How do I add an EDIT button to each post/page that allows me to enter the post/page from there and make changes?
      ** in wordpress.com not possible ( in logged in view you should see a edit link)

      14. How do I add a title for Categories and Tags in the lower right below the text?

      ** in wordpress.com not possible

      15. How do I change “Published by Neal Umphred” to “Author’s Bio”?

      ** in wordpress.com not possible

      16. How do I add space between the author bio and “View all posts by” below the text?

      17. How do I control the font for “Leave a Reply.”

      #reply-title {
      font-size: 24px !important;
      color: darkred;
      font-family: cursive;
      }

      18. How do I control the field of color behind the comment box?

      .comments-area, .respond {
      background-color: red !important;
      }

      Liked by 1 person

  2. nealumphred says:

    Wow! I will start testing them now …

    Like

  3. nealumphred says:

    WOW!

    Most of the code worked and my site looks soooooo much better!!

    THANKS!!!

    Like

  4. nealumphred says:

    OM

    Here are specifics about a few of the few codes …

    HOMEPAGE

    2.How do I center the Main Menu in the header?

    The code you gave me did NOT center the items in the Main Menu when looking at my site on a large screen.

    Not a problem as I decided to add two more links so it looks centered anyway.

    4. How do I increase/decrease font in the sentence at the top of the page where the address normally goes?

    How do I remove the hyperlink attached to this sentence?

    6. How do I make the featured images on the homepage smaller and separate from another so that the background shows on all four sides of the image?

    Thanks! I like the background fixed—very cool feel.

    How do I reduce the width of these images so that the color of the background can be seen on both side?

    INDIVIDUAL POSTS & PAGES

    10. How do I remove the entire header from the post/page and have the featured image fill the top of the page?

    How do I include a menu bar at the top of the posts/pages?

    11. How do I increase/decrease the size of the post/page titles?

    This did not work.

    Please go to this page:
    http://www.nealumphred.com/wp-admin/customize.php?autofocus%5Bsection%5D=custom_css&return=http%3A%2F%2Fwww.nealumphred.com%2Fwp-admin%2F&customize_changeset_uuid=&changeset_uuid=855b6c6b-2459-48d7-9c33-26598347dcf9

    I want to reduce the title “anonymity empowers cowards to become bullies” and all other post titles.

    12. How do I control the field of color behind the text?

    How do I control the color of the field behind the text that begins “I HAVE WRITTEN ABOUT BULLIES.”

    17. How do I control the font for “Leave a Reply.”

    This worked, but now how do I change Leave a Reply” to something else?

    Keep on keepin’ on,

    NEAL

    Like

    • Hi Neal,
      regarding menu issue please try this
      @media screen and (min-width: 1200px){
      .menu-wrapper {

      max-width: 763px;
      }}

      4. Regarding address link issue
      Answer : I need to check the dashboard for this

      6. How do I reduce the width of these images so that the color of the background can be seen on both side?
      .entry-thumbnail {
      width: 95%;
      margin-left: auto;
      margin-right: auto;
      }

      10. How do I remove the entire header from the post/page and have the featured image fill the top of the page?

      How do I include a menu bar at the top of the posts/pages?

      .single #masthead {
      display: block !important;
      }
      .single header#masthead .contact-info-area {
      display: none !important;
      }
      .single .header-wrapper {
      display: none !important;
      }

      11. How do I increase/decrease the size of the post/page titles?
      h1.entry-title {
      font-size: 13px;
      }

      17. How do I control the font for “Leave a Reply.”

      This worked, but now how do I change Leave a Reply” to something else?

      Keep on keepin’ on,

      *** Need to check dashboard

      12. How do I control the field of color behind the text?

      How do I control the color of the field behind the text that begins “I HAVE WRITTEN ABOUT BULLIES.”

      *** Footer widget area

      aside.widget-area {
      background: red !important;
      }

      *** Proudly Powered By area
      footer#colophon {
      background: darkblue;
      }

      **** article background

      .single article {
      background: green !important;
      }
      *** previous post section

      .post-nav-wrapper {
      background: red !important;
      }

      Like

  5. nealumphred says:

    OM

    Here are what I hope to be my final questions (links for each page in question included):

    HOMEPAGE [http://www.nealumphred.com/]

    Social Icons: Control color, size.
    Footer links: Control font, size, color, hover color.

    PAGES [http://www.nealumphred.com/little-background/]

    Article Title (“On Being A Mystical Liberal”): Control font, size, color.

    Text field: Control background color, width.

    Text (“What does it mean to be a Mystical Liberal?”): Control width

    POSTS [http://www.nealumphred.com/brass-balled/]

    Title (“brass-balled rightwing babe”): Control font, size, color.

    Leave a Reply: Control width of text field.

    Thanks in advance!!!

    NEAL

    Like

    • HI Neal,
      sorry i missed your questions,
      here is the answers

      **** footer widget font color, size and font family
      .widget li a {
      color: black !important;
      font-family: Georgia !important;
      font-size: 15px !important;
      }

      *** footer links hover colors of links

      .widget li a:hover {
      color: green !important;

      }

      can u share me screenshot image regarding other issues?

      Like

      • nealumphred says:

        OM

        It happens. Believe it or not, I was able to resolve those issues by using the code that you shared on your post about Twenty Seventeen!

        Here’s my biggest issue on my pages such as this one:

        http://www.nealumphred.com/mystical-liberal/

        Can I make the background of the header (title, tagline, nav bar) a different color from the rest of the site?

        Most important: How do I make the background behind the text of the article white?

        Best,

        NEAL

        Like

      • HI Neal,
        to change header background only in your mentioned page, try this

        .page-id-13642 #masthead {
        background: red !important;
        }

        also to make the background behind the text white..try this

        .page-id-13642 article {
        background: white !important;
        }

        let me know if it helps

        Om

        Liked by 1 person

  6. Alex says:

    Hi

    Great theme, really clean and nicely responsive!

    One little question, I’m using it on wordpress.com and notice that only footer 1 shows on most pages, whereas all 3 footers display on the homepage and posts. Is there a way to have all 3 footers show on all pages?

    thanks

    Like

  7. Alex says:

    Ah, perfect, thanks so much 🙂

    Like

  8. frapet says:

    Hi Om,

    thank you for your helpful tips on your site!

    My question is quite simple, however: How do I define/change the basic color (standard: red) which wraps the active menu button, pops up when you hover over the titel, etc.?

    Frank

    Like

  9. Rob T says:

    How difficult would it be to change to using a custom header/banner behind the site title and tagline instead of using the custom logo that appears above or beside (depending on style pack)?

    Like

  10. Rob T says:

    Thank you… The code you posted didn’t quite work, but it definitely put me on the right track:
    I went with:

    .custom-logo {
    display:none;
    }
    .site-branding {
    background: url(http://lizt.x10.mx/wp-content/uploads/2018/02/208797_5633825739_8733_n.jpg) no-repeat;
    }

    Obviously I’ll have to make some other edits to get the right look (including editing the image), but with the other code on your page here I should be able to muddle through 😉

    Regards,

    Like

      • Rob T says:

        Just thought I would share what I have ultimately done (in case anyone else has a similar question): instead of setting the background image of the .site-branding class directly, I added it with the ::after psuedo-element. This allowed me to control the background opacity without affecting the opacity of the child elements.
        The downside of the code that follows (specifically, using background-size:cover) is that it does not present the background image consistently across devices.

        .site-branding::after {
        content: “”;
        background: url(http://lizt.x10.mx/wp-content/uploads/2018/02/208797_5633825739_8733_n.jpg);background-size:cover;
        opacity: 0.4;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        position: absolute;
        z-index: -1;
        }

        Like

  11. saraaleman says:

    THis is all very useful, I think. But I’m a true beginner. I copied the appropriate text from above to add a banner background image in the header, like this:

    .custom-logo {
    display:none;
    }
    .site-branding {
    background: url(https://saraaleman.wordpress.com/montania/) no-repeat;
    }

    But I have no idea where to put the code! I need some very basic guidance, please, on where to find and then insert this code.
    Thank you,
    Sara
    https://saraaleman.wordpress.com/about/

    Like

  12. Bára Tury says:

    Hello Anders!

    I have to admit I find your tips super helpful even if I am an IT dumb 😀 Thank you for that! There is just one thing that I don´t know how to solve… I am missing the featured excerpt displayed on the homepage under the title of each post….is there any chance to add it? I have the premium plan.

    Thank you 🙂

    Barbora

    Like

  13. Bára Tury says:

    And when I called you Anders, I meant Om 😉 I am sorry, I misunderstood.

    Like

  14. Bára Tury says:

    It doesn´t allow me to reply to you under the original question anymore…but yes, exactly as you are saying. I want to show excerpt in my blog page equals my homepage.

    Like

  15. Good day, is there a way to make the menu sticky? Thank you

    Like

  16. Hi ! Where are thoses social logos ? I can’t find them…

    Like

  17. Hi ! Where are thoses social logos ? I can’t find them either 😦

    Like

  18. Miguel Gómez says:

    Hi!
    My name is Miguel and I have trouble with social media icons.
    I´m not sure, but I think I deleted that part in the theme and I can´t get them back.
    Could you help me?
    Thanks!
    This is my site: http://www.farmer.com.mx
    P.D. Your advices have been so helpful.

    Like

  19. multiversum says:

    Hi Om,
    I’d like to know if it’s possible to create a text box in the post or separate text in columns. Is there any code for this? Thank you.

    Like

  20. Nora says:

    Has anyone else noticed that when using a child theme, the style-pack thumbnails in the customizer are not loading as the customizer is looking for them in the child theme dir instead of the parent theme?

    Like

  21. David Sadler says:

    Is it possible to add a members area with the theme? I’ve been asked to add a members area that would require a login and allow private discussions, use of restricted email distribution lists, a member chats. How could this be done starting with Radcliffe 2?

    Thank you for your time

    David Sadler

    Like

  22. Hi Om Prakash Chowdhury! Thank you for the helpful information here! I just tried some of your CSS codes and they worked for my site! This is great!
    I only have one question. Is it possible to customize the appearance of a page that is set as a blog page and shows the posts? I really don’t like the appearance of the blog page in Radcliffe 2 (black/gray background and large titles) and that is why I hided it from the menu and I created a new regular page that shows the posts instead. I add the post manually to this page (News) and it is like a double work form me. Also if you search for something in the page, the search result appears the same way as the blog page. So, is it possible to customize the view of the blog page and the search results? I would like the blog page to be similar as my “News” page.

    https://financeexpert-bg.com/

    Thank you in advance!

    Like

    • Hi Файнанс Експерт ООД
      woud you mind to share me your news page url to check?
      if you are using your own hosting (not wordpress.com plans), then it can be done
      🙂
      Om

      Like

    • Hi Файнанс Експерт ООД
      I think it can be done
      it will need to create a template (blog type) to show your contents that way….
      i can help …but need me time
      can you share me a full backup (upload the backup in dropbox or google drive) of your site to my mail?
      my mail is om2000_cuet@yahoo.com

      i will check in my leisure..

      Om

      Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: