New to CSS

  • Author
    Posts
  • #1615808

    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.

    #1615859

    hfzrhmn
    Member

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

    https://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 ;)

    #1615862

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

    #1615880

    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;
    }
    #1615893

    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!

    #1615895

    justpi
    Member

    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.

    #1615896

    So sorry, here is the link

    #1615905

    justpi
    Member

    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.

    #1615928

    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!

    #1615931

    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

    #1615935

    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..

    I am so sorry for all the questions!

    #1615939

    hfzrhmn
    Member

    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?

    #1615940

    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!

    #1615941

    hfzrhmn
    Member

    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?

    #1615942

    justpi
    Member

    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”.

    #1615943

    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?

    #1615944

    justpi
    Member

    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.

    #1615945

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

    No? I am not sure what you mean

    #1615949

    justpi
    Member

    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 {

    #1615951

    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.

The topic ‘New to CSS’ is closed to new replies.