you're reading:
Alert/Intro/Notice, Background color, Color changes, Html & inline css codes, Stickies, Themes

Vigilance: further color changes

http://wpbtips.wordpress.com/

[Update June 3, 2010: WP just made various changes to Vigilance; codes below updated accordingly.]

Background to sticky post

A sticky post in Vigilance is visually differentiated by adopting the color you’ve set for borders (under Appearance > Vigilance Options) as its background; if you’ve set no hex number for borders, you get a light grey background. You can override that with code in the html editor.

For a different background color:

<div style="background-color:#HEX HERE;margin:-10px -10px -38px;padding:15px 15px 25px;">
COMPLETE CONTENT HERE
</div>

For no background color at all:

<div style="background-color:#fff;margin:-10px -10px -38px;padding:0 0 20px;">
COMPLETE CONTENT HERE
</div>

Background to Alert Box

By default, the Vigilance “Alert Box” gets a brownish grey background. Override:

<div style="width:578px;height:100%;margin:-21px 0 -21px -21px;background-color:#HEX HERE;padding:11px;">
COMPLETE CONTENT HERE
</div>

Or with a thin border as well:

<div style="width:578px;border:1px solid #aaa;height:100%;margin:-21px 0 -21px -21px;background-color:#HEX HERE;padding:11px;">
COMPLETE CONTENT HERE
</div>

(The aaa suggested for the border is grey – you can change it. For hex color codes see the “Color” links in my sidebar.)

http://wpbtips.wordpress.com/

Please don’t paste code in comments – see comment guidelines.

About these ads

Discussion

32 thoughts on “Vigilance: further color changes

  1. Hope this is’nt a dumb question, but where exazctlly do I find these Color customisable themes at?

    Posted by webmistress27 | December 23, 2009, 19:55
  2. Hope this isn’t a dumb answer, but my blog refers to wp.com blogs: themes are selected under Appearance>Themes in your dashboard.

    Posted by Panos | December 23, 2009, 23:42
  3. great!

    Posted by maniachic | December 24, 2009, 14:41
  4. Thanks!

    Posted by Panos | December 24, 2009, 16:50
  5. I was all prepared to purchase a CSS upgrade and beg or purchase the services of someone to edit the CSS on the Vigilance theme for me previous to Christmas. I had such “high blown” ideas like an even bigger header … lol :D Then I saw what my blog rendered like in different devices like iphones, notebooks, etc. and I also checked to see what it looked like in different browsers and on different operating systems. I realized that I was headed in the wrong direction and came to a halt.

    Since then I have tried out other themes but now I’m back to Vigilance. It’s too darn the features I like in the Simpla theme like the lack of a header image, the font styles, colors and sizes, and the little icons aren’t in Vigilance. I’m currently trying to resign myself to accepting that with grace but thus far it’s grating on me that I can’t have it my way … lol :D

    Once I settle down I’ll be coming back to this post and making some adjustments. Thanks for doing all the work that went into this posts, and your other posts too.

    Your friend,
    TT

    Posted by timethief | January 30, 2010, 02:53
  6. Fiddling with CSS is a step I haven’t dared take either (perhaps strangely, since by now I’ve become experienced in html).

    Like you, too, I haven’t found a single theme in which I like all the features. I’ve settled for Garland because of the two sidebars and because I could at least change the colors, but I’m not happy with some other things.

    No matter what theme you choose for your blog, it’s greatly enhanced by the content of your sidebar and the style of your posts. I think Vigilance is well designed, and it’s got some interesting options, but again… I don’t like the style of the header navigation, [*] and I don’t like the particular font mix (one font for the posts, seemingly different font for blog title and post titles, different font for header tabs and widget titles – not quite matching in my opinion).

    As for the details you mention,

    “lack of a header image”: possible in Vigilance;

    “font styles, colors and sizes”: as you know, can be changed for the content of posts, pages and text widgets via html, plus color of some elements can be changed via Appearance > Vigilance Options;

    “little icons”: where?

    [*] Note that you can remove the header page tabs and use the Pages widget instead (or use a text widget and create a custom page list styled any way you like). Quite possibly, I can also work out a differently styled nav bar, if you’re interested, and if you can settle for the fact that wp.com and non wp.com visitors won’t see it at exactly the same vertical point (but I can’t promise before I experiment and test it in several browsers).

    Posted by Panos | January 30, 2010, 16:14
  7. Re: “lack of a header image”: possible in Vigilance

    I know as I have the wordpress.org version (actually it’s “My Vigilance”, a child theme of the original Vigilance) See here> http://thistimethisspace.com

    Note there is no header above but the Blog title. I like that. However the blog title font is a little too big for my liking and I feel the post title font is too large as well. Bottom line I don’t like the fonts in the theme.

    In “My Vigilance” there is a header above the alert box. The width is fixed at 596 px and the height is the height of the image we choose. One can have rotating headers on the self hosted version 596 x 125 pixels. This was eliminated in the wp.com version.

    Also note that at the very top of the wide sidebar in “My Vigilance” there is a space that a video fits into or an image, advertising, etc. The width is fixed at 300px. and the height is the height of the image or object we choose. This was eliminated in the wp.com version.

    I also dislike those > one sees on the left of the widget titles in all the Vigilance versions.

    Re “little icons”: where? lol :D I meant the ones on the Simpla theme at the end of the posts (categories, tags).

    I’m considering moving thistimethisspace.com back to be free hosted at wordpress.com (it’s being domain mapped from the wp.com root blog). I’m not the kind of blogger that wants a lot of bells and whistles – I’m a minimalist and I’m paying for web hosting for nothing really because I don’t have lots of plugins, etc. I will probably do that in March.

    At present I’m mulling this over. It would be cool if you would like to work with me on this. I’d really appreciate it.

    Posted by timethief | January 31, 2010, 03:48
  8. “blog title font is a little too big for my liking”.

    For the wp.com version you can create and upload a header image that incorporates the title the way you’d like it to be (then select the Hide Text option).

    “header above the alert box [...] eliminated in the wp.com version”.

    You can still use a full-width (600px) image in the alert box. (Needs to be enclosed in a div tag with the margins I specify in this post, to counter the default padding.)

    “top of the wide sidebar [...] space that a video fits into or an image, advertising, etc. [...] eliminated in the wp.com version”.

    Of course image is still possible, using a text widget.

    “It would be cool if you would like to work with me on this. I’d really appreciate it.”

    Well I already made a suggestion in my previous comment, so obviously I’ll gladly help if I can.

    Posted by Panos | January 31, 2010, 09:33
  9. (1) I do not want a header image at all, in the sense of a decorative one, and I do want the blog title to be a home page link. If I choose hide text then what happens to the permalink?

    (2) I know I can use the Alert box and I know I can use the space at the top of the wide sidebar I was just sharing what was eliminated from the wp.com version with you.

    (3) Sometime in March (the date escapes me at the moment) I will make a decision about my personal blog either remaining self hosted or having it free hosted by wordpress.com. That’s when I’ll decide what I want to do about the theme. :)

    Posted by timethief | February 1, 2010, 04:54
  10. Re 2, yes I know you know! (Hence my “of course image is still possible”).

    Re 1: If you mean searchengine-wise, nothing happens to the permalink when you choose “Hide Text”; permalink, blog title and tagline remain alive and well at all the proper places in the source code of the page. You can create a white header image with your blog title and tagline, and I can work out the html that will make that header clickable.

    Posted by Panos | February 1, 2010, 09:11
  11. Thanks very much for these Vigilance tips! I’ve yet to fully understand the usefulness of the sticky post since it places your current content below the fold.

    Thanks again.

    Posted by Sandra Lee | March 20, 2010, 10:16
  12. You’re welcome! I think you’re right in doubting the usefulness of stickies, because the best thing for a visitor (especially a returning visitor) is seeing the latest post up top. Some bloggers use a sticky as a permanent intro to the blog, but in my opinion it’s better to use a static page for that. A sticky is best used for a temporary announcement, if and when you happen to need that; and a sticky is definitely bad if it’s so long that it occupies the whole of the browser window.

    Posted by Panos | March 20, 2010, 23:16
  13. @Panos
    I hope you don’t mind me wading in. I agree with what you have stated about “sticky” posts. As a temporary quick announcement soon to be removed they work well. But when bloggers leave them permanently on the front page it creates either one or both of the following impressions:
    (1) the impression that the blog is not being updated;
    (2) the impression that the blogger expects returning regular readers to scroll past it every time they visit to locate new entries.

    I’m a minimalist who adheres to the less is more principle. I use Vigilance and it has an Alert Box that I post blogging tips in every day or every 2 days. However, even when I did not use this theme I have steered clear of placing “sticky” posts on my front page. I want those search engine spiders to be all over it as frequently as possible indexing my content. I also do not want to create any barrier to readers, who wish to browse the entire the blog in any order they wish to. In other words, I am focused on providing full accessibility.

    Posted by timethief | March 21, 2010, 01:06
  14. @tt: No I’m glad you did – in fact I would have used your blog as an example if you still had the new URL announcement up.

    (@Sandra Lee: timethief is an experienced blogger and a fellow volunteer in the wp.com support forum.)

    Posted by Panos | March 21, 2010, 03:44
  15. Just dropped by to say thanks for the codes, have just adjusted my alert box in Vigilance.

    By the way, I agree with the other “wordpressers” here: I cannot find a theme that I love without having to change something, and if I do, I cannot switch to it because of stuff like image sizes or pages showing dates as if they were posts… However, I still adore WP – design is the only weak point perhaps, or it may be just my taste… :D

    Posted by Eszter | April 1, 2010, 21:15
  16. @Eszter: You’re welcome!

    As someone who’s been scrutinizing the themes, I can confidently say that it isn’t only a matter of taste: there are several themes with patent weaknesses or mistakes.

    And I find it strange that staff don’t fully test new themes before launching them. (One example: A unique feature in iNove is that you can deactivate the sidebar. When you do that, the text will occupy the whole theme width. But at first you couldn’t do the same with images. I was surprised to find that out, and more surprised that it had to be me pointing it out for the mistake to be corrected…)

    Posted by Panos | April 2, 2010, 04:54
  17. The trouble I’m having with Vigilance is that I don’t see how to turn on the colors behind different sections. I am using it as a website, so all static pages, no posts. I see where to alter the colors, but get a big empty looking style when I activate it.

    Posted by lakewoodsymphony | July 30, 2010, 03:17
  18. Link to the blog in question please: in the one linked to your username you’re using Freshy, not Vigilance.

    Posted by Panos | July 30, 2010, 10:59
  19. Panos … VERY USEFULL infos at your blog…. I am reading it for many hours today … like a big manual :)

    I prefer Vigilance theme, because it is clear and with a lot of features.

    I have some questions:

    1) Is it possible to put an image as a background (static … not scrolling up/down) ? If yes, with what parameters?

    2) Is it possible to change the horizontal size of blog to 95% (percent and not fixed size in pixels)?

    3) Is it possible to change the background color of main part (not left-right margins) ?

    Thanks a lot !!!!

    Posted by Vag | November 20, 2010, 00:08
  20. Thanks!

    1) Yes it’s possible, by putting this in a text widget:

    <div style="position:fixed;top:0;left:0;background:url(‘IMAGE URL HERE’);width:100%;height:100%;z-index:-11;"></div>

    Image should be wide enough (1200px should take care of most screens) and at a resolution of 72 (or it will take too long to load).

    2) 95% of what? Browser window?

    3) You mean the container of the whole content (currently white)? Yes, but only if you buy the CSS upgrade. CSS would be:

    #wrapper { background-color:#HEX CODE HERE; }

    Posted by Panos | November 20, 2010, 14:44
  21. Thanks :)

    About the 2nd … I mean 95% of browser window. I prefer to see more area with contents than a small part (when the resolutions are greater than 1280px)

    Posted by Vag | November 20, 2010, 15:24
  22. Possible if you have the CSS upgrade, but complicated, therefore not recommended if you’re not experienced in theme design and CSS editing. If you want a blog that can fill each user’s screen, better switch to a flexible-width theme (such as the one I”m using), in which most complications have already been dealt with by the designer.

    Posted by Panos | November 20, 2010, 19:25
  23. About my question:

    1) Is it possible to put an image as a background (static … not scrolling up/down) ? If yes, with what parameters?

    You told me that:

    1) Yes it’s possible, by putting this in a text widget:

    ————————-
    Ok … it works on wordpress.com (I already did it to my blog)

    I’d like to tell me (if you know/can) if there is another way to do the same to a wordpress blog BUT … not under wordpress.com

    I tried it and it is not accepted. I did a text widget and when i press save, it deletes everything between and (only remains after save)

    The blog is under sch.gr (Greek School Network… blogs.sch.gr)

    Thanks a lot for your advices !!

    Posted by Vag | November 25, 2010, 21:08
  24. You’re welcome, but if you mean a self-hosted blog I can’t help: I’m experienced in wp.com blogs only – wp.org software is different.

    Posted by Panos | November 25, 2010, 23:09
  25. Ok ….

    I did the following settings in user settings for CSS (theme is Arclite):


    body {background-color: none;}

    #footer {background-image: none; color: black;}

    ul#footer-widgets{background-image: none; color: black;}

    ul#footer-widgets li.widget li a{background-image: none; color: blue;}

    ul#footer-widgets li.widget li a:hover{
    color: red;
    }

    /*.post {background-attachment: normal;background-image:url('LINK_TO_IMAGE');}*/

    .block-content {background-attachment: fixed;background-image:url('LINK_TO_IMAGE');width: 95%; max-width: 100%;}

    and now is ok…. Please tell me if the code is ok … or may be cause any problem ….

    Thanks again

    Posted by Vag | November 26, 2010, 00:09
  26. Well, I can’t check things since I can’t use that theme and since I don’t have the link to the blog in question. But it should be ok as long as the selectors are ok: I don’t think changing colors and inserting a bg image can cause problems – it’s not as if you changed a column width or the like (which might kick other elements out of place). The only thing I might do differently is the color declarations: I’d probably use hex codes, so that I could apply more interesting hues than basic red and blue; but whether you need that or not depends on the overall color palette of the theme.

    Posted by Panos | November 26, 2010, 12:24
  27. Hi, I hope it’s ok to leave a new comment on an old topic. I’m using the Vigilance theme for my blog, and I love everything about it – except for the way it does nested comments. I want to use nested comments because it’s easier to follow a conversation, but Vigilance is making each new reply to a comment narrower and narrower, until finally they look ridiculous. Is there a way to change it so that nested comments have a minimum width?

    If you reply to this, please explain in detail. This is my first blog and I’ve never mucked about with css or html before. :(

    Posted by khizzara | March 18, 2011, 21:40
  28. That’s how nested comments show up in all themes. How would you visually distinguish replies from independent comments if the replies aren’t indented?

    What varies from theme to theme is the amount of indenting. In Vigilance it’s too pronounced. You can decrease it if you have the paid CSS upgrade. Do you?

    If not, you can abandon nesting, or you can limit it to a few levels only (in Settings>Discussion).

    Posted by Panos | March 18, 2011, 23:21
  29. Thank you for your response! Sadly I don’t have the paid CSS upgrade, and I’m not likely to get it at the moment. Do you know if I’ll lose comments by changing the number of levels I allow? I’d hate to have comments I’ve already received deleted or made invisible because I changed the number of levels.

    This is really too bad… I don’t want to switch to another theme, but the pronounced indent drives me crazy.

    Posted by khizzara | March 19, 2011, 00:46
  30. I can tell you how to decrease the indenting if you buy the upgrade, but of course it’s not worth buying it just for that.

    No, of course you don’t lose comments if you reduce the number of levels. Replies that are past the allowed level will show up with no further indenting, and they will lose the Reply button.

    As you said in the forum, switching theme might be a better solution. Some white themes that support a header image and bg color, and have minimal indenting of nested comments, are Bueno,* Enterprise, Pilcrow and zBench.

    * If, like me, you like Bueno but find its header font ugly, check this post before discarding the theme:

    http://wpbtips.wordpress.com/2010/05/30/improving-bueno-via-typekit/

    Posted by Panos | March 19, 2011, 02:08
  31. Hi – there a way to add two alert boxes to Vigilance? And, what might the code be. Thanks.

    Posted by Sheepdog | May 19, 2011, 19:43
  32. Sorry SD – check point 1 here:

    http://wpbtips.wordpress.com/comment-guidelines/

    Posted by Panos | May 20, 2011, 05:22

Author

author's avatar panos (justpi)

 Subject Index

Announcement 22/03/2012: After WP's latest move, this blog will no longer offer active support and assistance. The blog will remain online but commenting on older posts has been disabled.
✶ All theme-related posts are updated up to and including theme 189 in this list, but will not continue to be updated.

Stats

  • 2,470,915 views
  • Views per month:
Safari Icon Firefox - Never Internet Explorer
Note: if you see ads on this site, they are placed by WordPress, not me.
wpbtips.wordpress.com
Mostly on themes, formatting, coding, tweaks and workarounds.
Based on or springing from my contributing in the wp.com forum.
Theme-related posts constantly updated
Premium themes and Annotum not included
%d bloggers like this: