WordPress.com Theme Sight by WpShower Support, Customization,Modifications and Documentation

Theme Sight by WPShower modifications

Here I have shared some more css modifications which you can enjoy if you are using theme Sight by WPshower, it is a free theme which u can use under wordpress.com and wordpress.org and the following css you can use in your custom css if you want to give it your choiceable look .

Here is the download link of the theme : Theme Sight by WPShower Download

You can use my shared code and ask question in the comments section.

Or can take my personal help.
1. If You want to change font color,font size, font weight and font family of Theme Sight of wordpress.com

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

.site-title {
font-family: times new roman !important;
font-size: 4.5rem !important;
font-weight: bold !important;
text-transform: none !important;
}

**** If you use “text-transform:lowercase“ then your site title will be lowercased letters

2. If you want to change Site Description’s font color, font family, font weight

.site-description {
color: darkred;
font-family: times new roman;
font-size: 2.1rem;
font-weight: bold;
padding: 2em 0 0;
}

3. If you want to remove the Search Box from the top right of the header section in theme Sight

.header-nav-search-container {
display: none;
}

4. If you want to remove the “Site Description” from the header

.site-description {
display: none !important;
}

5. If you want to show Site Title to cover the whole space of the header without Search and Site Description in theme Sight use the codes below

.site-header hgroup {
width: auto;
}

.site-title {
width: auto;
padding: 12px 0 0;
}
.header-nav-search-container {
display: none;
}
.site-description {
display: none !important;
}

6. If you want to change Navigation Menu’s (parents) hover background color of theme Sight

.main-navigation ul li:hover {
background: red !important;
padding-bottom: 12px;
margin-bottom: 0px !important;
text-decoration: none;
}


7. If you want to remove the Underline which is showing in Menu while hover


.main-navigation a {
text-decoration: none !important;

}

8. If you want to change the Sub Menu’s background color of theme Sight


.main-navigation ul ul {
background: none repeat scroll 0 0 darkred;
}

theme sight by wpshower header title menus searchbar modifications


9. Show posts in Home page Slider of Theme Sight WordPress


*** just select your posts as sticky and it will be visible in the slider… and try to use featured image.


10. If you want to change the Featured Slider yellowish background color of theme Sight


.featured-post {
background: none repeat scroll 0 0 lime !important;

}


11. If you want to remove the Categories showing above the Featured slider of Home page in theme sight

#featured-content .entry-categories {
display: none;
}


12. If you want to change the Featured Slider’s Post Title’s font color, font family and font size of theme Sight


.featured-post-content .entry-title a {
color: darkred !important;
font-family: times new roman;
font-size: 21px;
}


13. If you don’t want to show the Post date showing in the Featured Post Slider in Theme sight


#featured-content .entry-meta {
display: none;
}


14. If you want to change the Right Sidebar’s widget title’s font color, font family and font size of theme Sight


.widget-title {
color: darkred;
font-weight: bold;
font-family: times new roman;
font-size: 1.8em;
}

theme sight by wpshower featured slider modifications


15. If you want to change Right Sidebar’s link color,font family,font size, font weight


#secondary li a {
color: darkred;
font-size: 13px;
font-family: times new roman;
font-weight: bold;
}

15.1. To change hover color of Widget or Right sidebar links use this code

#secondary li a:hover {
color: blue !important;

}


16. If you want to put background color beside the Widget title,and make the Widget Title Centered in Theme Sight

.widget-title {
background: none repeat scroll 0 0 green !important;
color: darkred;
font-family: times new roman;
font-size: 1.8em;
font-weight: bold;
text-align: center;
}


17. If you want to give your widget block some background color use this code


.widget {
background: none repeat scroll 0 0 orange !important;
padding: 12px !important;
}

theme-sight-by-wpshower-right-sidebar-modifications


18. If you want to put border around the Featured Thumnbnail images showing in the homepage in theme Sight


.entry-thumbnail img {
border: 7px solid orange;
max-width: 100%;
}


19. If you want to remove the footer Theme Info “Blog At WordPress.com “ from theme Sight use this code


.site-info {
display: none !important;
}


20. From Individual Post and Homepage, If you want to remove the Top Category Name from theme Sight


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


21. From Individual Post page and Homepage if you want to remove the “Posted On” metas


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

23. To change “Continue Reading” font color,size and font family at homepage
.more-link a {
color: darkred !important;
font-size: 18px !important;
font-family: times new roman !important;
}

theme sight by wpshower homepage single post page modifications


24. If you want to change the background color or image of theme Sight of wordpress use the following code

body {
background: none repeat scroll 0 0 orange !important;
}


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

OR


Want me to help you personally for CSS Issue?CLICK HERE….

30 Responses to WordPress.com Theme Sight by WpShower Support, Customization,Modifications and Documentation

  1. Stephanie says:

    Do you have to purchase the CSS upgrade to use these codes or is there something I’m missing? Thank you!

    Like

  2. Hi – how can I add border around the slider or around the main blog area (that includs the slider)?
    Is there a way to do it?
    Thanks!

    Like

    • hi Blondynka
      sorry for the late response…can u share me ur site url pls?

      Om

      Like

      • Hi – the url is:
        http://wkrainieteczy.wordpress.com/
        I think I figured it out, but have further question:
        How can I align the sub menu and widget text and titles?
        Currently they are slightly missaligned (widget more indented than sub-menu text)

        Like

      • Hi Blondynka
        would u mind to share here what code u used for the border around slider?

        also
        can u share me screenshot image about the alignment issue pls? sorry didnt understand

        Om

        Like

      • Hi – the code I used for the changes that are now active:

        1) for the margin around slider which uses the background of the slider (currently active)

        .featured-thumbnail {
        margin: 0 1em;
        }

        .featured-content .featured-post-content {
        margin: 1.7em 1em;
        }

        2) for the padding around slider (which is not active currently), it creates white padding on each side, but also some padding on the bottom which is same colour as slider background

        .featured-wrapper {
        padding-left: 1 em;
        }
        .featured-wrapper {
        padding-right: 1em;
        }

        3) other changes:

        .site-header {
        margin: 1em;
        }

        .latest-posts-header {
        display: none;
        }

        .home .hentry:first-of-type {
        padding-top: 0;
        }

        I don’t seem to be able to add screen print or any files, but I basically need all text on the right side (widget’s, sub-menu and slider text) to be align with each other.
        I know how to manipulate slider text, but not the sub-menu and widgets.

        Thanks!

        Like

      • HI Blondynka
        thanks…actually i didnt understand that align issue properly 😦
        Om

        Like

      • Hi – I managed to sort out the alignment issue with the text on the right side by adjusting the margin of the header, this poshed the text of the second menu toward the right side by few pixels, which seemes to work (at least on screens of my computers).

        Like

  3. ithinkink says:

    Hi,

    I’m trying to change the white color on the sight theme to this: #fccb32 and keep the black background.

    How do I do that?

    Thanks,
    T

    Like

  4. barracov says:

    You’re a life saver thanks for this? How do I change the font colour of main menu? How do I change background colour of main menu? If I add a period or another word to my title, how do I change the colour and/or font of the period or second word? Thanks!
    http://18thcenturyconductlit.wordpress.com

    Like

    • Barracov
      pls try this

      .main-navigation li:hover > a, .main-navigation ul ul :hover > a, .main-navigation ul ul a:hover {
      color: red !important;
      text-decoration: underline;
      }

      Om

      Like

  5. barracov says:

    Also, how do I change the menu background colour once someone has clicked and is viewing the current page? Also, how do i change the font colour when I hover the menu?

    Like

    • Hi
      Menu background for selected ite
      #page > nav > div.menu > ul > li.current_page_item {
      background: grey;
      }

      and

      Menu background for all
      .main-navigation li {
      background: red;
      }

      Like

  6. Hi allaboutbasic, the above information really helped me to improve our website. I just had one question, it seems that each title of our main menu gets hidden by the sub menus? thanks in advance

    Like

    • HI Thomas
      which site you are working on? please share me that site url
      Om

      Like

      • Hi Om, thanks for your reply.
        vitalityawesomeness.com is the website but I actually managed to fix it. What I’m trying to do now is add a background colour to the sidebar section. However I want the entire sidebar section to have a different colour and not just around the sections. Is this something you can help me with?

        Thanks
        Thomas

        Like

      • HI Thomas
        thanks
        for background color in the sidebar try this code

        #secondary {
        padding: 0.333em 2.500em 10px 10px !important;
        background: darkblue;
        }
        You will need to change the sidebar link and text color for that
        Om

        Like

      • Thanks Om, It’s perfect. Would there be something to add the code to keep the first widget out which our social media buttons. I just want them to be outside the grey background as they are right at the top.
        Thank you

        Like

      • Hi Thomas….no…as you are using wordpress.com free hosted site..that can’t be done properly….

        Om

        Liked by 1 person

      • Can I however change the background colour of one of the widgets? I just want the section where people can subscribe to be in a different colour. just it stands out a bit more.

        Like

      • Hi Thomas
        for individual widget section to be different color..u will need modifications… like color of text may need to change…

        so try this code

        aside.widget_top-posts {
        background: red !important;
        background-color: white;
        padding: 11px;
        width: 100% !important;
        }

        let me know if it helps

        Om

        Like

      • thanks Om, that is exactly what I was after. one quick question, is there a way not to have margins? At the moment it shows as it’s on top of the sidebar as I would prefer it not to have margins on each side. is this possible?

        Like

      • HI Thomas
        try this code
        aside#wpcom_social_media_icons_widget-9 {
        padding-left: 15px !important;
        margin-right: 0px !important;
        width: 309px !important;
        padding-right: 0px !important;
        margin-left: -10px !important;
        margin-top: -5px !important;
        }

        Om

        Like

  7. Hi Om,

    I have another cheeky question for you, that’s only because you’re so good.

    On the following website http://sight.wpshower.com I really like how they presented their “recent post” section in their sidebar. is there a way I could make our “trending/popular posts” section in our sidebar (vitality awesomeness.com) to look that crisp? the widget I’m actually using is ‘top posts & pages’.

    Thanks again
    Thomas

    Like

    • HI Thomas
      would u mind to try this code please
      .widgets-list-layout.no-grav li {
      display: block;
      padding-bottom: 9px;
      margin-top: 9px;
      border-bottom: 1px dotted #d9d9d9;
      }
      .widgets-list-layout.no-grav li a {
      display: block;
      font: 12px Georgia, Geneva, “Times New Roman”, times;
      margin-bottom: 6px !important;
      }

      let me know if it helps
      Om

      Like

      • Thanks Om, It’s perfect it’s exactly what we were after. Is there a way to centre the social media widgets as they’re currently showing on the left?
        Thanks again
        Thomas

        Like

      • HI Thomas
        Regarding Social icons center issue try this code

        aside#wpcom_social_media_icons_widget-9 ul {
        width: 47% !important;
        float: none;
        margin-left: auto;
        margin-right: auto;
        }

        let me know if it helps
        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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s

%d bloggers like this: