Forums

[resolved] widgets inline? (18 posts)

  1. amaeria
    Member
    Posted 2 years ago #

    hey
    have read through old topics here but couldnt find the answer...

    How to get the widgets INLINE instead of vertically?

    I have a blank theme and no .php for widgets so i do not have a clue how these can be controlled in the design and layout....
    somewhere in css i guess but how to get the css to connect to the widgets...?

  2. esmi
    Theme Diva & Forum Moderator
    Posted 2 years ago #

    You need to set up the widgets and their markup first before you can style them via CSS.

  3. Mark / t31os
    Moderator
    Posted 2 years ago #

    Are you asking how to re-position the widgets?..

    Take a look at the sidebar file, it should be pretty evident would code produces the widgetized area, cut or copy that code wherever else you want it, footer, header, category file, whatever you like...

    Alternatively you can also register additional widgets in your theme, if that's what you need please clarify..

    *waves @ esmi* :)

  4. esmi
    Theme Diva & Forum Moderator
    Posted 2 years ago #

    I'd suggest that the first thing to try is adding a few widgets. If they display correctly, then looking at the page source markup should give you some idea of what markup and classes/ids the widgets use. You can then add those classes/ids to your theme's stylesheet and start re-positioning and styling the widgets.

    If the widgets don't display, you need to get the sidebar widget-capable.

    [Hey, t31os_! I think we've been in different time zones the past week or so. :-)]

  5. amaeria
    Member
    Posted 2 years ago #

    thanks for advice and yes, the widgets do display, i have added following to the css but seems like doesnt work...
    is there a special command for widgets?

    .searchform {display:inline}
    .widgettitle {display:inline}

  6. esmi
    Theme Diva & Forum Moderator
    Posted 2 years ago #

    Assuming that the widgets are within list markup, it's going to depend upon what else is in your stylesheet and where this particular block lies in the cascade. Chances are that you also need to use something like:

    .widgettitle li {display:inline}

    if your widgets are lists in themselves (eg Pages, Archives, Recent Comments etc).

    If the site/theme is online and you can post a url, I might be able to help you pin it down. Failing that, if you use Firefox, try installing Firebug. It's invaluable for pinning down what CSS is affecting individual markup elements.

  7. Mark / t31os
    Moderator
    Posted 2 years ago #

    Could you provide a broader description of what you want to do with the widgets?

    It may just be easier to show you how to add your own secondary widget area (it's easy).

    @esmi Yeah i'm a night-owl, so my timezone is all over the place (UK)... where are you? :)

  8. esmi
    Theme Diva & Forum Moderator
    Posted 2 years ago #

    @amaeria: Assuming you want something like a tabbed top menu and your sidebar template file looks something like:

    <div class="menu" id="top_sidebar">
    <ul>
    <?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('Top Tabs')) : ?>
    <?php endif; ?>
    </ul>
    </div>

    you could add:

    if (function_exists('register_sidebar')) {
    	register_sidebar(array(
    		'name'=> 'Top Tabs',
    		'id' => 'top_sidebar',
    		'before_widget' => '<li id="%1$s">',
    		'after_widget' => '</li>',
    	));
    }

    to functions.php and

    .menu h2 {
    	display:none;
    }
    .menu ul,.tabs li {
    	margin:0;
    	padding:0;
    	display:inline;
    	line-height:1em;
    }
    .menu a {
    	display:inline-block;
    	padding:5px;
    	margin:0;
    	text-decoration:none;
    }

    to your stylesheet. That's worked for me in the past when I wanted a horizontal widget-ready menu.

    @t31os_: UK too! A scouser, to be exact.

  9. amaeria
    Member
    Posted 2 years ago #

    oh
    hm,
    tried to change according to wat you said inside the function.php as well as css but now in the end i cannot access anything.
    all and everything is blank and i cannot get access to the admin either....
    something must have gone really wrong....
    ?

  10. esmi
    Theme Diva & Forum Moderator
    Posted 2 years ago #

    Most likely the problem is in functions.php. Download functions.php via FTP, delete the block you added in a text editor, save the file and re-upload it to your theme again.

  11. amaeria
    Member
    Posted 2 years ago #

    ok, that worked out fine
    and well. again it is for
    http://www.dreamandawake.com/onlineshop
    ......
    dont know what i am doing wrong?!?!

  12. esmi
    Theme Diva & Forum Moderator
    Posted 2 years ago #

    Can you drop a copy of your functions.php file into the WordPress pastebin? I think there was a problem with the placement of the code I suggested.

  13. Mark / t31os
    Moderator
    Posted 2 years ago #

    Wow, never pegged you as a scouser... goes to show you never really know someone until you know them (if that makes sense, lol)..

    To keep on topic though i was going to suggest the functions area being the problem.. :) looks like you have it covered though.. ;)

  14. amaeria
    Member
    Posted 2 years ago #

    here it is, the functions.php

    http://wordpress.pastebin.ca/1510895

  15. esmi
    Theme Diva & Forum Moderator
    Posted 2 years ago #

    Try the updated version: http://wordpress.pastebin.ca/1511145

  16. amaeria
    Member
    Posted 2 years ago #

    ok hmhmhmhm,,
    so
    i have added that and also following to the css

    .menu h2 {
    display:none;
    }
    .menu ul,.tabs li {
    margin:0;
    padding:0;
    display:inline;
    line-height:1em;
    }
    .menu a {
    display:inline-block;
    padding:5px;
    margin:0;
    text-decoration:none;
    }

    looking like this ...
    http://www.dreamandawake.com/onlineshop

  17. esmi
    Theme Diva & Forum Moderator
    Posted 2 years ago #

    Oh - an eShop site. I feel quite at home now. :-)

    Your layouts/sidebar_top.css isn't where it should be (ie within your theme directory in a folder called 'layouts'.

    You also need to look at dropping the layered text graphics. I'd suggest going right back to basics and using the basic Kubrick theme and the default eshop.css sheet. Trying to untangle what you've already tried to put into place is going to be too difficult.

  18. amaeria
    Member
    Posted 2 years ago #

    ookej, thank you i ll add some oil and work on it.got firebug now might help abit.thank you very much for all help!

Topic Closed

This topic has been closed to new replies.

About this Topic