WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Looking for a plugin to customize my sidebar (22 posts)

  1. dmahsiri
    Member
    Posted 1 year ago #

    Hi,
    I am using pagelines theme, and I would like to add borders to the widgets in the sidebar.
    Widgets seems to be mixed together, Is there a plugin I can use to add borders to my widgets?
    This is my website :site

  2. Odai Athamneh
    Member
    Posted 1 year ago #

    Hi Dmahsiri

    You can do this easily using a Child Theme, no need for a plug-in! Here's a mock-up I did in 2 minutes:

    http://odai.me/wp-content/uploads/Screenshot-from-2013-01-24-204113.png

    Notice the black lines around your widgets. Is that the look you're going for? If so, I'll tell you how to do this.

  3. dmahsiri
    Member
    Posted 1 year ago #

    Hi Odai Athamneh,
    Sorry for the delay, I was busy the last 2 days.
    I viewed the mock-up, not bad, but I was looking for something more professional.
    I would like to add a colored background to the widget's title.
    Here is an example : http://www.fawayed.net/
    but using pink instead of green, can you help me do that?

  4. Odai Athamneh
    Member
    Posted 1 year ago #

    I looked at Fawayed, but are you talking about the widgets across the top, or the sidebar on the right?

    We'll figure out the exact look later. For now, you need to create a Child Theme for your site.

    Below, I copy-and-pasted my instructions from another question. Follow these instructions to create a Child Theme:

    ...

    Go into your server's file system where you installed WordPress, and find a folder called "wp-content". In there, find the "themes" folder.

    Create a new folder called "twentytwelvechild" and enter it. Now, we're going to create a file called style.css

    Open up a text editor and paste in the following code:

    /*
    Theme Name:     Twenty Twelve Child
    Description:    Child theme for the Twenty Twelve theme
    Template:       twentytwelve
    Version:        0.1.0
    */
    
    @import url("../twentytwelve/style.css");

    Now save that as "style.css" and upload it your "twentytwelvechild" folder. Congratulations! You have a Child Theme.

  5. dmahsiri
    Member
    Posted 1 year ago #

    Hi,
    I am sorry, but I didn't find the "wp content" ,where should it be?
    I think this is complicated.
    Is there an easier way?

  6. leejosepho
    Member
    Posted 1 year ago #

    Your wp-content folder should already be inside your public_html folder, and you will need to place your new twentytwelvechild folder inside your themes folder that is already inside the wp-content folder like Odai has described...and no, that is as easy as it gets.

  7. Odai Athamneh
    Member
    Posted 1 year ago #

    Well, there is the One-Click Child Theme, but I haven't tested it, so I can't promise it works.

    I know this stuff is complex, but you built that whole site already, right? You're a capable person, you can do it! (Of course, you could hire someone to make a theme for you, but I don't think you need to)

    I did make one mistake in my last post. You don't want to make a Child Theme of Twenty Twelve... you want to make the Child Theme of whatever theme you're using.

  8. Odai Athamneh
    Member
    Posted 1 year ago #

    Okay, I just tested the One-Click Child Theme, it works. Use that.

  9. dmahsiri
    Member
    Posted 1 year ago #

    Sorry I didn't notice that you posted a reply.
    I have been setting here for an hour looking for the wp-content folder,finally found it and created the child theme and uploaded.....
    So what is the next step?
    Let me give you an example of what I wish to do:
    http://th08.deviantart.net/fs29/PRE/f/2008/077/b/6/Corp_temp_for_4T_by_nodethirtythree.jpg
    As you may noticed, I'd like to make a pink background to my widgets' titles, in addition to changing the main menu from blue to pink.
    will you pls help me in that?

  10. dmahsiri
    Member
    Posted 1 year ago #

    Ok,
    I have just renamed the child theme according to my theme " Pagelines".

  11. Odai Athamneh
    Member
    Posted 1 year ago #

    Ah! Thanks for that example picture, I had something totally different in mind!

    Now that you have your Child Theme, you're going to add custom CSS code to the style.css file in that Child Theme.

    I'll give you the code you need in a few minutes... I have to go write it! :P

  12. Odai Athamneh
    Member
    Posted 1 year ago #

    Okay, this isn't perfect code yet, but here's something basic to start:

    .widget-title {
    color: rgba(0,0,0,0.7);
    text-align: left;
    padding: 3px 8px 3px 0px;
    margin-bottom: .6em;
    background-color: #EE6AA7;
    }

    In your Child Theme's style.css file, you need to paste this code at the end of it. There's an editor in WordPress to do this, in the Appearance sub-menu, called "Editor".

    I had trouble figuring out the right color (that #EE6AA7 thing controls the color). This page has more color options, you should try different colors until you find one you like.

    We can still make it look better - that's just something to get you started.

  13. dmahsiri
    Member
    Posted 1 year ago #

    ic , but I have another problem to fix first, the child theme is for twentytwelve, while I am using paglines theme, I tried reaname it, but it is still named after twentytwelve in the wp editor, is that a problem?

  14. Odai Athamneh
    Member
    Posted 1 year ago #

    Could you copy the code from your Child Theme's style.css file, and paste it here?

    MAKE SURE to use the Code tag (there's a button above the post writing area that does it for you), which is a backtick before and after the code. Otherwise, your post won't show up correctly.

    It could be that it's just named Twenty Twelve, which isn't a problem, but it could be loading the wrong theme as well. It depends.

  15. dmahsiri
    Member
    Posted 1 year ago #

    /*
    Theme Name:     Twenty Twelve Child
    Description:    Child theme for the Twenty Twelve theme
    Template:       twentytwelve
    Version:        0.1.0
    */
    
    @import url("../twentytwelve/style.css");
  16. leejosepho
    Member
    Posted 1 year ago #

    Oops, please pardon me.

  17. Odai Athamneh
    Member
    Posted 1 year ago #

    Okay, replace that with this:

    /*
    Theme Name:     Page Lines Child
    Description:    Child theme for the Page Lines
    Template:       pagelines
    Version:        1.0.0
    */
    
    @import url("../pagelines/style.css");
    
    .widget-title {
    color: rgba(0,0,0,0.7);
    text-align: left;
    padding: 3px 8px 3px 0px;
    margin-bottom: .6em;
    background-color: #EE6AA7;
    }
  18. dmahsiri
    Member
    Posted 1 year ago #

    It is working:D thanks
    I just need to make the pink title back ground's height a little bit more?
    so if I need to change the styles of my theme, just enter a code to the child's theme ?

  19. Odai Athamneh
    Member
    Posted 1 year ago #

    Yes, just insert the CSS you need. There are lots of CSS functions, and lots of websites that can tell you how to use it.

    To make it taller, just add height: 20px; before that last }. Of course, 20px may not be the right size for you - try different sizes.

  20. dmahsiri
    Member
    Posted 1 year ago #

    .widget-title {
    color: rgba(0,0,0,0.7);
    text-align: left;
    padding: 3px 8px 3px 0px;
    margin-bottom: .6em;
    background-color: #EE6AA7;20px
    }

    Is that where to add height?

  21. Odai Athamneh
    Member
    Posted 1 year ago #

    Sorry, should have been clearer about that.

    So this

    .widget-title {
    color: rgba(0,0,0,0.7);
    text-align: left;
    padding: 3px 8px 3px 0px;
    margin-bottom: .6em;
    background-color: #EE6AA7;
    }

    becomes

    .widget-title {
    color: rgba(0,0,0,0.7);
    text-align: left;
    padding: 3px 8px 3px 0px;
    margin-bottom: .6em;
    background-color: #EE6AA7;
    height: 20px;
    }
  22. dmahsiri
    Member
    Posted 1 year ago #

    Got it,
    thanks alot :D

Topic Closed

This topic has been closed to new replies.

About this Topic