how to reduce the width of sidebar1

  • Author
    Posts
  • #85312

    wikibladi
    Member

    Would you please let me know how to reduce the width of sidebar1 and decrease the width of sidebar2.
    Thank you for your support

    The blog I need help with is wikibladi.com.

    #85439

    otjeremy
    Member

    Hi Wiki,

    For the sidebar on the left (sidebar main):

    .sidebar-main {
        width: 25%;
    }

    And for the sidebar on the right (the small sidebar):

    .sidebar-small {
        width: 16.6667%
    }

    Thanks!

    #85533

    wikibladi
    Member

    Thank you for your reply, it did not work with my actual theme wich is “Massive Press”.
    I want to reduce the sidebar1 and increase the sidebar 2, or increase both sidebars (right and left) that are under the main (top) column.
    Please help. Thank you

    #85542

    otjeremy
    Member

    If that doesn’t work you can try this:

    .grid-3 {
        width: 16%;
    }

    But both sidebar areas use this, so you couldn’t style them independently (which is to say that the sidebars aren’t really designed to be re-styled, so it will require some effort to achieve).

    Thanks!

    #85625

    wikibladi
    Member

    Thank you again. this one works with the sidebar1 and 2, and I want to increase the width of the left sidebar and the right one that are under the main sidebar.

    please help me to get the featured image slider (main sidebar) larger than how it is now by increasing the width of the 2 sidebar unde (right and left)

    Thank you for your support

    #85626

    otjeremy
    Member

    Hi wiki,

    What you’re asking for is customization, and that falls outside the scope of support we provide. If you wanted to attempt this yourself, then my recommendation is to use a browser inspect tool (like Chrome’s built-in tool, or Firebug for Firefox) to determine the selectors you need to alter, and the CSS that you need to add). Note that this might be difficult than it otherwise would be (for example, on a self-hosted site) because you only have access to CSS.

    Thanks!

    #85636

    wikibladi
    Member

    Thank you, I fixied it.
    could you please let me know if I can change the navigation bullets into navigation numbers. I prefer to have numbers in stead of bullets.
    Thank you

    #85637

    otjeremy
    Member

    Sure, you’ll need to change the list style on the ul li (and possibly ol li) tags: https://css-tricks.com/almanac/properties/l/list-style/

    Thanks!

    #85647

    wikibladi
    Member

    I did not understand this. I just want to change the nav-bullets into nav-numbers (numbers in place of circle dots). any CSS code for that ? Thank you

    #85650

    otjeremy
    Member

    The CSS is listed as one of the examples:

    ul {
        list-style: square outside decimal;
    }

    If this isn’t working for a particular list, provide a link to the post / page and I’ll take a look.

    Thanks!

    #85652

    wikibladi
    Member

    my blog is wikibladi.com . I want to change the nav-bullets into numbers. The bullets that are in featured images slider to be replaced by numbers.

    Thank you for your support

    #85656

    otjeremy
    Member

    That area will require a couple different changes:

    .orbit-bullets li {
        background: transparent;
        display: list-item;
        list-style-type: decimal;
    }
    
    .orbit-bullets li.active {
        background: transparent;
        color: #fff;
    }

    This will hide the circle list style, show numbers, and then you can style from here.

    Thanks!

    #85704

    wikibladi
    Member

    Hello,
    I want to have my last post featured image directed to the right since my website is in a language with the direction from right to left. I already changed the direction of the bullets’ float but the images direction need to be changed too (every last post must be posted to the right side). You gave me, last time, this code but it does not work :
    .slideshow-wrapper .orbit-container li .orbit-caption {
    direction: rtl;
    }
    my website is Wikibladi.com
    please help
    Thank you for your support

    #85705

    otjeremy
    Member

    Just to make sure I understand: currently, the image you want to display last is displaying first, and the image you want to display first is displaying last? (If so, a workaround in the mean time would be to edit the date stamps for your posts so that they re-order, keeping in mind that the newest display first (left) to oldest (right)).

    Thanks!

    #85706

    wikibladi
    Member

    the defaut of the theme make the newest display first (left) to oldest (right)). but I want the opposite : newest display first (right) to oldest (left).

    #85707

    otjeremy
    Member

    Thanks for confirming.

    We’d need to update the theme to change the post order for rtl languages, so in the mean time I recommend altering your post dates to re-order the posts, and that should be a workable work-around.

    Thanks!

    #85708

    wikibladi
    Member

    how to do that ?

    #85709

    wikibladi
    Member

    I need an other help please.

    I want to change the orbit bullets from bullets to images (the features images that are posted in the feature slider), I need these images to be posted in small size in place of the bullets (the navigation balls).

    last time you gave me the code to change the bullets into decimals, but now I prefer that they are shown as images of the feature slider.

    Thank you very much for your help.

    #85710

    otjeremy
    Member

    See here for changing the post date: https://en.support.wordpress.com/schedule-a-post/

    To change the bullets into images you’ll need to make a similar change to what you made earlier, but this time with images instead of bullets. So you might have something like:

    .orbit-bullets li {
        background: url('image.png');
        display: list-item;
        list-style-type: none;
    }

    Thanks!

    #85711

    wikibladi
    Member

    I does not work, no image was shown in stead of bullets.

The topic ‘how to reduce the width of sidebar1’ is closed to new replies.