Need help? Check out our Support site, then


New to CSS

  1. I have purchased the CSS this morning and I have no clue what to do! I have chosen Adelle as my theme {it isn't live yet} and I want to put widgets down the side {I know how to do that} but what I am asking is if anybody can shed any light on how I can put borders around the text widgets {i.e Search I would like a banner type boarder around the lettering "Search"}

    Also how hard is CSS!!

    The blog I need help with is mummyheartsyou.com.

  2. CSS is relatively simple, but you might want to find out the basics this way:

    http://en.forums.wordpress.com/topic/learning-about-css-1?replies=1

    In any case, you can just ask around here and people will help you with the proper CSS code for your need. Might want to get the site live first, though, it's hard for us to work on something if that particular something does not exist yet ;)

  3. Thanks for your reply, I have just posted it live.. Its a work in progress!

  4. Hi there, the following is a start on your borders for widget titles. I've done a double border, but there are a number of predefined border styles in CSS you can use.

    .widget-title, .widgettitle, h2.widgettitle {
        border: 4px double #CC0000;
    }
  5. mummyheartsyou
    Member

    Hi thanks for your reply, if I wanted to do a custom sidebar widget titles ("Top posts, archives, Follow Me, etc") how would that work? for instance this type of border/banner type thing
    file:///Users/ambelton/Desktop/test.jpg
    I am not technical at all so sorry if this sounds silly!

  6. We cannot see files stored in your computer!
    You need to upload the image to your blog via Media > Add New, click Edit, copy its URL from the File URL field of the Save box, paste the URL here.

  7. mummyheartsyou
    Member

  8. To get an idea of how this would work, paste the following code into the CSS editor:

    .widget_search .widget-title {
        background: url("http://mummyheartsyou.files.wordpress.com/2014/01/test1.jpg") no-repeat scroll center 0 transparent;
        height: 42px;
    }

    For now I left the actual title on, because I'm not sure if you want the title as part of the image (as on your example) or if you only added it to show us where you want the image to fall in relation to the actual title of the widget.

    As you'll see, you need larger images, and their background must be transparent, not white.

  9. mummyheartsyou
    Member

    Oh thats perfect! I will change the sizing etc.. If I wanted to add more what {i.e favourite post, archives etc..} what part of the CSS code would I need to change?

    Thank you so much for your help!

  10. mummyheartsyou
    Member

    Sorry for all the questions! I am really not technical at all! Ive added a larger custom title, but now I can't seem to position it above the search bar and I have to have a title to actually see the custom widget, How do I remove the widget title, every time I do the custom header disappears and the custom header is not above the widget itself...

    So sorry again and thanks in advance for you answers

  11. ok, I've managed to centralised the "search" custom picture.. I can't for the life of me sort out the others! Ive been working all morning on it.. These are the images I want in the side menu above certain widgets..

    http://mummyheartsyou.files.wordpress.com/2014/01/recentpost.png

    http://mummyheartsyou.files.wordpress.com/2014/01/follow-me.png

    http://mummyheartsyou.files.wordpress.com/2014/01/grab.png

    I am so sorry for all the questions!

  12. Hi there,

    for someone claiming to be "not technical at all", you're doing a good job customizing your theme so far. I hope these CSS can help you, they should add the Follow Me and Recent Post header images.

    #secondary #social-networks {
        background: url("http://mummyheartsyou.files.wordpress.com/2014/01/follow-me.png") no-repeat scroll center 0 transparent;
        padding-top: 100px;
    }
    #secondary .widget_recent_entries .widget-title {
        background: url("http://mummyheartsyou.files.wordpress.com/2014/01/recentpost.png") no-repeat scroll center 0 transparent;
        height: 100px;
    }

    I'm not sure where to put the grab.png image. Where do you want it to be?

  13. I need to add the image so it will be at the bottom of the widget area..

    Thank you so much for your help :) the CSS is so confusing for me!

  14. Just checked your site again. Just to be sure, do you want the grab.png image to replace the "Follow Blog via Email" widget title?

  15. Your new image shows in part only, because the 42 in my previous suggestion was designed for the previous (smaller) image: you need to increase the height.
    Literally removing the widget title removes the image too, because the image is added as a background to the title. You can make the title invisible by setting its font size to 0 or by kicking it out of the visible area as shown below.

    .widget_search .widget-title {
    background: url("http://mummyheartsyou.files.wordpress.com/2014/01/search.png") no-repeat scroll center 0 transparent;
    height: 80px;
    text-indent: -9999px;
    }

    To add similar images to other widgets, you'll add the same formula again, replacing the image URL and the widget selector. For example, the Recent Posts widget requires this:

    .widget_recent_entries .widget-title {
    background: url("IMAGE URL HERE") no-repeat scroll center 0 transparent;
    height: 80px;
    text-indent: -9999px;
    }

    Do you know how to find the selector for each widget you add?

    Also, if you want the images to be left aligned rather than centered, replace "center" with "0".

  16. Ive added the image widget now, so Grab would be above that? also how would I change the follow me to be the header for the email follow instead of social networks?

  17. Ah, sorry: I didn't refresh before posting my reply! "New image" obviously refers to your Search image the way I saw it when I set about replying.

  18. Do you know how to find the selector for each widget you add?

    No? I am not sure what you mean

  19. Each CSS code is like this:
    SELECTOR(S) HERE { PROPERTIES & VALUES HERE }

    Selectors determine which element(s) you target. For example,
    when you write this:
    .widget_search {
    you say apply the following to the search widget,
    and when you write this:
    .widget_search .widget-title {
    you say apply the following to the title of the search widget.

    So, as I said, each bg image you want to add requires the same code, with a different image URL and a different selector at the beginning. For the title of the Follow me widget you need this:
    .widget_blog_subscription .widget-title {

  20. mummyheartsyou
    Member

    ok I understand! Thank you.. How do you determine the name to put in the CSS though? so blog follow is blog subscription? does that make sense..? Search is easy, but things like the text widget? I can't get to grips with how you work out what to put in the CSS to determine it to fall above the widget.

  21. You're welcome.
    Do get to grips with that, you need to learn to use the Inspect Element tool of your browser or a developer add-on like Firebug in Firefox.

  22. mummyheartsyou
    Member

    Oh I see!! You have opened up a world of knowledge! Thank you so much, I am struggling with the text image code {for the text widget} though, every one I type it just isn't working!

  23. mummyheartsyou
    Member

    I am having real trouble with adding a title for "bloglovin" and "My badge"

    http://mummyheartsyou.files.wordpress.com/2014/01/bloglovin1.png

    http://mummyheartsyou.files.wordpress.com/2014/01/grab.png

    Ive had a look on the inspect development tool and I can't quite figure it out! sorry for being such a pain..

  24. You're welcome!

    If you want to use the same method for your text widgets, you must first go to Appearance > Widgets, open each Text widget and enter a title. Apparently you didn't notice this (from one of my previous replies above):
    "You can make the title invisible [...] as shown below."

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags