WordPress Tricks

Theme Vigilance by The Theme Foundry CSS Upgrade||Style Sheet Edit || Hide,Remove or Modify your Blog’s Site Title,Navigation Menus,Post Title,Site Description,Footer Comments,Tags,Author Information, Sidebar,Post Contents Width font color, size or Text alignment,

allaboutbasic

Theme Vigilance by The Theme Foundry


If you are using Theme: Vigilance by The Theme Foundry and if you want to Edit your blog or site’s style using CSS then this section is specially for you. Here I have shared some important aspect which you may face while editing Vigilance theme’s CSS style sheet. Here I have shared about how to resize and change color of Header Title font and Blog post title font. Also, you will be able to widen your blog content area by removing the sidebar. You can also vanish or disappear the Tag portion which is just under the Blog Post Title if you don’t want to show it. Again If you want to interchange the position of Navigation bar and Blog Description you can easily do it by the procedure I have shared below. Just Read them below and give your blog or page a stylish look by changing and modifying the CSS. If you have any question regarding CSS post your question in the comment box.

1. If you don’t want to show Header Title of Vigilance theme just add the following property in #title

#title {
display: none;
font-size: 4.6em;
font-weight: bold;
height: 165px;
line-height: 1.3em;
margin: 0;
overflow: hidden;
text-align: center;
vertical-align: middle;
width: 920px;
}

2.If you want to change header Title font color,font size and font type of Theme Vigilance by The Theme Foundry

#title span {
color: red;
font-family: cursive;
font-size: 1em;
position: relative;
top: 25%;
}

3. If you want to change Header or Site Title’s Background Color of Theme Vigilance.

#title {
background-color: green;
font-size: 4.6em;
font-weight: bold;
height: 165px;
line-height: 1.3em;
margin: 0;
overflow: hidden;
text-align: center;
vertical-align: middle;
width: 920px;
}

4. If you want to remove the white / Blank space just above the Header Title or Site Title.

#header {
border-bottom: 5px solid #333333;
padding: 0 0 0;
position: relative;
}
#title span {
color: red;
font-family: cursive;
font-size: 1em;
position: relative;
top: 5%;
}
#title {
font-size: 4.6em;
font-weight: bold;
height: 131px;
line-height: 1.3em;
margin: 0;
overflow: hidden;
text-align: center;
vertical-align: middle;
width: 920px;
}

5. If you don’t want to show Site Description in Vigilance theme

#description {
display: none;
float: left;
margin-top: 15px;
}

6. If you want to change Site Description’s Font color,font type and font size

#description h2 {
color: black;
font-family: cursive;
font-size: 1.2em;
font-weight: normal;
}

7.If you want to remove “Home”, “About Me” Navigation (Nav) bar of Theme Vigilance

#nav {

display: none;

}

8. If you want to remove the gray Line just under or beneath the Header Title of Theme Vigilance

#header {

border-bottom: none;
padding: 20px 0 0;
position: relative;

}

9. If you want to remove sidebar from the right hand side of your blog

#sidebar {
display: none;
float: right;
padding-bottom: 20px;
width: 300px;
}

10. if you want to make your Theme Vigilance content area wider after Hiding SideBar

#content {
float: left;
padding: 20px 20px 20px 0;
width: 930px;
}

11. if you want to Hide Tags from Theme Vigilance

.tags {
display: none;
float: right;
font-style: italic;
text-align: right;
width: 400px;
}

12. if you want change Font Type, font size and also make the blog post font justified or aligned of Theme Vigilance

.entry {
font-family: cursive;
font-size: 1.3em;
text-align: justify;
}

13. If you want to change Blog Post Date Color, font size,font type

.post .date {
color: #757575;

font-family: “Trebuchet MS”,”Lucida Grande”,”Lucida Sans”,Verdana,Arial,sans-serif;
font-size: 1.6em;
font-weight: normal;
padding-top: 10px;
text-transform: uppercase;
}

14. If you want to Hide Blog Post Date

.post .date {
color: #757575;
display: none;
font-family: “Trebuchet MS”,”Lucida Grande”,”Lucida Sans”,Verdana,Arial,sans-serif;
font-size: 1.6em;
font-weight: normal;
padding-top: 10px;
text-transform: uppercase;
}

15.If you want to change Blog post header Background Color

.post-header {
background-color: red;
border-bottom: 4px double #EEEEEE;
padding-bottom: 7px;
}

16. If you want to change Blog Post Header Font color,font type and Font size
.post-header {
border-bottom: 4px double #EEEEEE;
font-family: cursive;
font-size: 1em;
padding-bottom: 7px;
}

17. If you want to change “Author Information” or “Meta”‘s font color,size and font type

.meta {
color: red;
font-family: times New Roman;
font-size: 1.2em;
}

18. If you don’t want to show or hide “Author Information” or “Meta”‘s

.meta {
color: red;
font-family: times New Roman;
font-size: 1.2em;
}

19. If you want to change Navigation menus (“Home” “About Me”)font type and font size

#nav ul li a:hover, #nav ul li:hover > a, #nav ul li.current_page_item > a, #nav ul li.current_page_parent > a, #nav ul li.current_page_ancestor > a, #nav ul li.current-cat > a, #nav ul li.current-menu-ancestor > a, #nav ul li.current-menu-item > a, #nav ul li.current-menu-parent a {
border-top: 4px solid #772124;
color: blue;
font-family: times New Roman;
font-size: 23px;
text-decoration: none;
}

#nav li a {
color: blue;
font-family: times New Roman;
font-size: 23px;
padding-top: 0.1em;
text-decoration: none;
}

20. If you want to move the “HOME”, “About Me” Nav bar to the Left hand side just change in the #nav and #description as below.

#nav {
float: left;
font-family: “Trebuchet MS”,”Lucida Grande”,”Lucida Sans”,Verdana,Arial,sans-serif;
font-size: 1.5em;
margin: 15px 0 10px;
}

#description {
float: right; //( or display: none);
margin-top: 15px;

}

21. If you want to move description at the right hand side just change in #description

#description {
float: right;
margin-top: 15px;
}

22.If you don’t want to show or hide comments in Theme: Vigilance by The Theme Foundry

#comments
{
display:none;
}

23.If you don’t want to show leave a reply in Theme: Vigilance by The Theme Foundry

#respond {
display: none;
font-size: 1.5em;
}

24. If you want to change “Comments” Header font type,font size

div.c-head {
color: black;
font-family: times New Roman;
font-size: 20px;
font-weight: bold;
}

25. If you want to change “Comments” Header font color

a:link, a:visited {
color: blue;
}

26. If you want to change “Comments” Body font-color,font size and font type

div.c-body p {
color: red;
font-family: cursive;
font-size: 15px;
margin: 10px 0 0;
}

Need Help for CSS?? Submit your problem in the comment box below.

Published by allaboutbasic

54 thoughts on “Theme Vigilance by The Theme Foundry CSS Upgrade||Style Sheet Edit || Hide,Remove or Modify your Blog’s Site Title,Navigation Menus,Post Title,Site Description,Footer Comments,Tags,Author Information, Sidebar,Post Contents Width font color, size or Text alignment,”

  1. This is very helpful. I have not purchased the CSS upgrade yet, but when I do, this info. will come in handy.
    Right now, I’m just trying to change the post title font with TypeKit. I tried html tags: .post-header, .post-header h1, .post-header h2 and no changes. 😦 Any ideas? Is there a .post-title tag? Why do different themes seem to use different tags for the same thing? I don’t know much, but I’m glad I found this link. Thank you!

    Like

    Reply

  3. hi, I like your website. its a cool site and I wanted to post a bit note 2 tell you, nice job regarding Theme: Vigilance by The Theme Foundry CSS Upgrade and Style Edit

    Like

    Reply

  4. Hello,

    I need your help with something. I’d like to create a static front page for my Vigilance theme, sort of a “welcome page” with just one picture in the middle and a link to the “blog” itself somewhere underneath that picture. I have found this link (http://codex.wordpress.org/Creating_a_Static_Front_Page) that does what it says it does, but I want to know if I can remove everything on that static page, everything BUT the picture and the link towards the posts page. I’m asking because I’m contemplating purchasing the CSS plugin and I want to know if this can be done first.

    Take a look at my blog if you want, let me know what you think and if I can be helped.

    Thanks a lot!

    Like

    Reply

      1. Hi, sorry for not being too clear, I’ve had a long week lol

        So, I have the Vigilance theme, and I’d like to create a static front page for my blog. I followed the tutorial of the link I previously gave you and it worked but it didn’t look the way I wanted. So I wanted to try the CSS plugin. They have that “preview” option. I wanted to hide the top bar, so that the pages I created didn’t show up on it. And it worked. So now I was wondering if with CSS I could basically take out everything only from my static page

        I’d like to have a static front page with only the picture and a link to the blog, nothing else on it, no header, no columns, nothing. Maybe the sharing buttons. Pretty much like this one: http://www.justintshockley.com/

        I haven’t purchased the plugin yet because I wanted to know if my idea was at all doable.

        What do you think?

        Best,
        Filip

        Like

      2. Hi Filip,

        If you are using wordpress.com self hosted free blog then it is not possible what you are trying to do as it may need php files modification or creating a page template to give it a look which you want.

        WordPress.com is free and you don’t have options to modify the php files or creating template (as i know)

        REgards
        Om

        Like

  5. Is there anyway to move the location of the tags back to the bottom of the blog instead of just hiding them?

    Some blogs have more tags than others and we don’t want that to distract, confuse or deter the readers.

    Any help with this matter would be greatly appreciated!

    Thank you

    Like

    Reply

  6. Hi there,

    Thanks so much for your informative help on the Vigilance wordpress theme – it’s greatly appreciated. I was wondering if you could assist me. I want to remove the grey lines in the sidebar area on my blog – I utilize the wide and left sidebar widgets. I was also wondering if you happened to know how to remove the indentation of the items in the sidebar. I want everything to be in-line without those arrow things. All your tips have been so awesome and would be stoked if you could assist on this.

    Thanks in advance!
    T

    Like

    Reply

    1. Hi Theresa,
      Sorry for the late..
      pls try the following code to remove the grey line from the sidebar

      ul li.widget ul li {
      border-bottom-color: white;
      }

      ALso.
      Would u mind to clarify me the indentation problem u mentioned?

      Om

      Like

      Reply

      1. Thank you so much for your quick reply – means alot! So in regards to the indentation issue, for my sidebar, the categories below the main topic are indented in with an arrow ” > “. I was wondering if there was a way to remove the arrow and align the categories with the main topic. For instance, for my “RECENT POSTS”, I want all the elements under it to be shifted left w/o the arrow so everything is lined up vertically. Sorry for the confusion!!

        I will try your tip this evening. Thank you thank you!!!

        Thanks again,
        Theresa

        Like

      3. Om, you are absolutely awesome!!! Your code worked! You have no idea how long I’ve been trying to figure that out. Thank you sooooo much! I just have one last quick question. For my sidebar, there are still some grey lines below the categories such as “RECENT POSTS”. Your previous code worked well to get rid of most of the lines, but would you happen to know how to get rid of these as well? I tried to insert “border-top-color: white;” into the code you initially gave me – but it didn’t work.

        Thanks for all your help! I really appreciate it!!

        Like

      4. Hi Theresa,
        Nice to know my codes helped you..
        i think u r searching for the code…

        h2.widgettitle {
        border-bottom: medium none;
        }

        Pls let me know the result..

        Om

        Like

      6. Hi Om,

        I just wanted to let you know that I tried out the last code you sent me, and it worked!! Thanks so very much! I’m so glad that I ran into your site – it’s the most helpful one I’ve seen for wordpress themes!!

        Thanks so much again for everything!!
        Theresa

        Like

  7. Thanks for you great page. I was wondering how to change the background color on all pages. I can change the color on the first page by writing: .home { background-color: #fff; }. But all other pages keep the old background color.

    Like

    Reply

  8. Hi Om,

    Hope all is well. I have a question for you regarding custom header/banner images. Do you know how to add one? I’d like to include one on my blog. In particular, I’d like the image to be ‘clickable’ meaning that I want to be able to click on it so it brings users back to the home page.

    Thanks so much in advance Om! You’d helped me out so much, and I’m greatly appreciative!

    Regards,
    Theresa

    The Habit

    Like

    Reply

  9. Hi Om,

    I’d like to move the ‘tags’ to the lower left corner above the ‘comments’. Do you know how to do this? Currently, you just show how to remove them but not relocate them. An option to relocate them would be awesome! 🙂

    Thanks in advance!
    Theresa

    Like

    Reply

  10. Hi Om –

    I’m a blogger (www.munrowe.com) using the Vigilance Theme, which I’ve played around with quite a bit. The only thing that I’d love to do is widen my main content area WITHOUT reducing the 300px width of my sidebar area. Essentially, I would just like to see LESS of the beige-y background and more of my mainbar area. Is this possible?

    Any help would be greatly appreciated!

    Thx,
    JUSTIN

    Like

    Reply

      1. Hey Om –

        It seems when I widen the wrapper and content sections of my site, the images do match the *new* width. Even when they are uploaded at “full size” – they still won’t widen past 650px.

        x

        Like

      1. I’m helping someone get her site set up — everything else I was able to do and this is the only thing I couldn’t figure out. Her blog is caviardreamsblog dot wordpress dot com

        Like

      2. HI Victoria..
        ok..try this code at to make theme Vigilance navigation (nav) menu centered

        #nav {
        display: block;
        float: none !important;
        font-family: “raleway-1″,”raleway-2”,sans-serif;
        font-size: 1.5em;
        margin-bottom: 3px;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-top: 10px;
        position: relative;
        width: 678px !important;
        }

        Pls let me know it works or not

        Om

        Like

  13. Okay Question, On the sidebar the text is so small but I can only adjust it with the body text and I like how the body text size is right now and I wish the sidebar text was a little bigger.. Does anyone know how to change the sidebar text to make it bigger?

    Like

    Reply

  14. Om,

    You are the BEST! Thank you so much!

    Okay, one more thing.. The color of text on the sidebar where it says HELLO & WELCOME, CONNECT, & LOVELY SPONSORS I wanted all those the color f8a5b9 but keeping the rest of the text black.. Hopefully that makes sense..?

    Like

    Reply

    1. Hi Kristin
      nice to know it helps

      here is the css code to change your widget title’s color of Vigilance theme Sidebar

      #sidebar .widgettitle {
      color: #f8a5b9 !important;
      }

      Regards
      Om

      Like

      Reply

  15. Hi Om,

    I was wondering if you could tell me how to add an image within my footer. It’s basically like a clickable link. Any help would be beyond appreciated. 🙂

    Best,
    Theresa

    Like

    Reply

      2. Theresa
        if u dont have footer widget section….then you can add the image at the footer by installing widget section for the footer….or by hardcoding it in footer.php

        Om

        Like

      3. Thanks for your feedback Om. If I wanted to hardcode it, do you know how I could do that? I need to add an image link in the footer. I have the link, just don’t know how to add it. 🙂

        Thanks,
        Theresa

        Like

      4. Theresa
        go to your theme’s footer.php

        and there you will see 

        <div id="footer">

        just below that line add this

          <div id="omma">
    <img src="ur image url" />
  </div>

        *** change the image url

        Om

        Like

    1. Hi Kate
      sorry for the late response
      which plan of wordpress.com you are using? premium or personal plan?
      if Personal Plan you are using, you can’t use css
      please let me know
      Regards
      Om

      Like

      Reply

      3. THANK YOU SO MUCH! I was tearing my hair out trying to sort this out. It was so kind of you to help me and I really appreciate it. You are the best of the web!

        Like

Leave a comment