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.
You can take my personal help in skype : om2000_cuet
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;
}
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;
}
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;
}
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;
}
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
You can take my personal help in skype : om2000_cuet
Do you have to purchase the CSS upgrade to use these codes or is there something I’m missing? Thank you!
LikeLike
Hi Stephanie
right…for wordpress.com you have to purchase css upgrade
Om
LikeLike
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!
LikeLike
hi Blondynka
sorry for the late response…can u share me ur site url pls?
Om
LikeLike
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)
LikeLike
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
LikeLike
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!
LikeLike
HI Blondynka
thanks…actually i didnt understand that align issue properly 😦
Om
LikeLike
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).
LikeLike
Great
🙂
Om
LikeLike
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
LikeLike
Hi
pls share me ur site url
Om
LikeLiked by 1 person
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
LikeLike
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
LikeLike
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?
LikeLike
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;
}
LikeLike
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
LikeLike
HI Thomas
which site you are working on? please share me that site url
Om
LikeLike
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
LikeLike
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
LikeLike
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
LikeLike
Hi Thomas….no…as you are using wordpress.com free hosted site..that can’t be done properly….
Om
LikeLiked 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.
LikeLike
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
LikeLike
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?
LikeLike
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
LikeLike
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
LikeLike
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
LikeLike
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
LikeLike
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
LikeLike
Hi Om!
I have a problem with te appearance of my homepage (site portoenvolto.com) in sight theme. The option of mosaic (with thumbnails bellow the slideshow) is not functioning properly, since it shows all the thumbnails in a single column. How can I fix this and also configure it to be the default view of my homepage?
Thank you so much.
Vera
LikeLike
Goodmorning Vera
just checked the demo site https://sightdemo.wordpress.com/ and your site…and ur site seems ok?
sorry would u mind to clarify me the issue some more please?
Om
LikeLike
is there a way to remove the borders in the top menu?
LikeLike
Hi
share me the site url please
Om
LikeLike
http://lovagabondo.com/
Also, I wanted to make the font of the theme bigger (right now it looks like 12 but I want it to be 14). I am not sure where to place the CSS code as well as what sort of code should I use so it doesn’t affect anything else.
Would really appreciate your help.
Thanks!
LikeLike
HI
To remove the border..
.dd li {
border: none !important;
}
.nav {
border-top: none !important;
}
also
which font u want to increase? menu one?
and
u have to use Simple Custom Css to use my provided code
Om
LikeLike
Thank you! Really helpful! Also, I wanted to increase the font on every page and in every post – not in the menu.
LikeLike
Hi
i found none of your pages has any content? there is no text content in any of ur pages?
Om
LikeLike
Hi,
I am aware of that. I am still working on the website before I can put any content up. Is there any way I can increase the font size of all posts and pages that are already existing and will appear n the future? At the moment it seems like 12pt but I would like it to be at least 14pt. Thanks!
LikeLike
Hi I checked some of ur pages..like http://lovagabondo.com/category/art-and-design/ and found there is no contents or text to increase font size?
Om
LikeLike
Here are the two pages:
http://lovagabondo.com/submissions/
http://lovagabondo.com/about/
I am still building the website, but I would like the font to be bigger as I write and post.
LikeLike
try this code
div#container, div#container div, div#container p {
font-size: 14px;
}
Om
LikeLike
Hello,
your blog is awsome! I just wanted to ask you if perhaps there is a way to change the font color of sliders (not the titles, but the main text)? I want the slideshow to be different then the posts that are shown below it or when you click on them. My website is http://www.fronasreadsorelse.com. I want all of the text in the sliders to be golden/yellow and the text elsewhere black.
Thank you!
Frona
LikeLike
Hi Frona
sorry i was away for few days to reply any comments
here is your answer
try this code
.slide .post-content {
color: red !important;
}
Om
LikeLike
Thank you soooooo much!! After all the efforts it finally works!:)
LikeLike
Pleasure..if you have any other issue in future please don’t forget to let me know
Om
LikeLike