[Sidebar] Formatting widgets in a sidebar?

  • Resolved Uh Oh Spaghetti Os

    (@uh-oh-spaghetti-os)


    11 years ago

    Hi all,

    I just created myself an alternate page template in order to have two similarly formatted pages with alternate sidebars.

    I can get the alternate page to use my secondary sidebar just fine, but the widgets all have bullet points.

    So, what I done was:
    Created sidebar-2.php
    Created a new widget area; “Secondary Widget Area”
    Called the secondary widget area in sidebar-2.php as such:

    <div id="primary" class="widget-area" role="complementary">
<?php dynamic_sidebar( 'secondary-widget-area' ); ?>
</div><!-- #primary .widget-area -->

    I’m guessing there’s something I’m not quite getting in the above code, anyone got any ideas?

Viewing 12 replies - 1 through 12 (of 12 total)
  • WPyogi

    (@wpyogi)

    11 years ago

    Bullets showing or not is typically controlled by the CSS for lists. Try using Firebug to see what CSS (if any) is being applied to that sidebar/list – compare it to the other sidebar.

    See: http://www.w3schools.com/css/css_list.asp

    Or post a link to a page and someone else may be able to help you with the specifics.

    Thread Starter Uh Oh Spaghetti Os

    (@uh-oh-spaghetti-os)

    11 years ago

    A-ha!
    This is, at the very least, pushing me in the right direction.

    Thank you kindly.

    It seems each element / widget included in the sidebar (when viewed through Firebug) begins with ‘li’

    Changing this to ‘ul’ removed the bullet points

    In my above post, I added all the code that exists in my sidebar-2.php, is it possible that this sidebar is calling some formatting from somewhere else?
    I think this is really what I need help pinpointing

    WPyogi

    (@wpyogi)

    11 years ago

    I would not recommend changing the HTML code unless you know what you are doing – you will likely just create code errors.

    Make sure you validate your pages for valid code:

    http://codex.wordpress.org/Validating_a_Website

    Yes, styles are likely being used if you copied code – using a tool such as Firebug will show you exactly the CSS that is being applied to any element on the page. IMHO – it’s literally impossible to do web work without using a tool like that, so that would be my first recommendation to you.

    WPyogi

    (@wpyogi)

    11 years ago

    Without a link to your site, it’s VERY difficult to be more specific about issues like this.

    Thread Starter Uh Oh Spaghetti Os

    (@uh-oh-spaghetti-os)

    11 years ago

    EDIT: I apologize in advance for the wordy writing, I know it isn’t particularly programmer-friendly 😛

    I’m fairly familiar with HTML and PHP, but I’m pretty new to CSS and I have barely even touched WordPress in the past

    The issue I’m having is that, given that the sidebar-2 code is literally 3 lines, I can’t, for the life of me, figure out what is influencing its styling

    Also, I understand its difficult to diagnose a patient based off symptoms, as the analogy goes, but the site is currently a highly top secret underground development.
    At least, in my head it is, but really it’s just under lock and key, to which I am not at liberty to allow access.

    I apologize for this, and I thank you, deeply, for the assistance you have given me so far

    Would you care to hazard a guess as to where this styling could be coming from?

    The only pages related to this sidebar are a widget area (I’m not familiar with these in the slightest) and the page template, which I guess, extensively, would include the stylesheet

    Though, if I swap out the sidebar-2 for sidebar, it displays fine

    WPyogi

    (@wpyogi)

    11 years ago

    Are you using Firebug? It’s very easy to use (yes you need to read a bit and try a few things) and shows you EXACTLY where the styles are coming from.

    Thread Starter Uh Oh Spaghetti Os

    (@uh-oh-spaghetti-os)

    11 years ago

    Actually, I just kind of assumed that Firebug was the same as Chrome’s element inspector, based off what I have heard.

    I’ll have to break open the old Firefox and have a real look at it

    esmi

    (@esmi)

    11 years ago

    Firebug is what Chrome’s Inspector tool wants to be when it grows up. It can cut hours off development and debugging times.

    Michael

    (@alchymyth)

    11 years ago

    what is the code for ‘register_sidebar()’ for your sidebar in functions.php?

    your sidebar-2.php code might be missing the <ul> tags;

    see this example from Twenty Ten (only essential code shown):

    <div id="primary" class="widget-area" role="complementary">
			<ul class="xoxo">
<?php if ( ! dynamic_sidebar( 'primary-widget-area' ) ) : ?>
		<?php endif; // end primary widget area ?>
			</ul>
		</div><!-- #primary .widget-area -->

    Thread Starter Uh Oh Spaghetti Os

    (@uh-oh-spaghetti-os)

    11 years ago

    Hi there all,

    Sorry I haven’t been keeping up with this over the weekend, but I can now see how firebug is a very useful development tool
    I was able to find out where these bullet points were coming from (my style.css) and remove them

    Thanks again everybody

    Thread Starter Uh Oh Spaghetti Os

    (@uh-oh-spaghetti-os)

    11 years ago

    I prefer to create my own templates. That’s a cool little site, but offering free templates and suggesting plugins kind of goes against the topic of that entire post, given that if everybody’s blog looks the same, none of them will stand out, and that entire guide is moot

    Also, I’ve just realized that the Firebug thing worked for Firefox, but I’m still seeing the same issue in Chrome and IE, strangely enough

    Thread Starter Uh Oh Spaghetti Os

    (@uh-oh-spaghetti-os)

    11 years ago

    Fixed.
    Playing around with Firebug, I managed to solve the issue on Firefox by simply removing the left padding.

    To fix the issue on Chrome and IE, I ended up going into the .css and just adding the list-style: none; property to #primary

    Thanks for all the input guys!

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘[Sidebar] Formatting widgets in a sidebar?’ is closed to new replies.