Need help? Check out our Support site, then


need to modify some things on Triton Lite them

  1. Hi there,
    I'm a newbie on wordpress.com but not in CSS... though, I have a hard time to manage the changes I want. I saw a bunch of things on this messageboard but when I tried on my own css (I have the CSS customization option of course), 80% of this things don't work and I can't figure out why...

    So, I have few questions :

    1- I think that the width of Triton theme is fixed because on my iMac, it's ok but on my McBook, I have a scrollbar on the bottom of the blog... So can I have some code to make the width flexible (or fluid) ?

    2- How can I make the thin black line below my header and navbar disappear ? And how can I adjust the height of the header and the navbar ?

    3- How can I the thick gray line below each excerpt on my home page disappear ?

    4- How can I make the thick gray line below the title of my widgets on the right sidebar disappear ?

    I think this is it for this first time... Sorry for my bas english, I am French and it appears that the French forum is poor on css help !

    Thanks a lot in advance !

    The blog I need help with is scrapbidouilleries.com.

  2. Hi,

    The Triton Lite theme has a set width of 960 pixels. Any monitor resolution less than this width will show the scroll bar.

    To remove the bottom border of the header and to adjust the height of the header, you can use the following:
    #header { border-bottom: 0 none; height: 100px;}

    To remove the border below the excerpts on the home page, you can use the following CSS.
    .lay1 > div { border-bottom: 0 none; }

    Lastly, to remove the thick grey line below the title of widgets, you can use the following:
    #sidebar .widgets .widgettitle, #sidebar .widgets .widgettitle a { border-bottom: 0 none; }

    Cheers!

  3. Oh my Gosh, thank you, all of this works like a charm !!! Thanks so much !!!
    So for the width, there is nothing I could you ? Can't modify it with some code ?... That's too bad for my readers who use a laptop...

  4. I have another question, do I have to post another thread or not ?
    I wanted to reduce the gap between the widget on my footer, any idea how I can do it ?

  5. I have another question, do I have to post another thread or not ?

    It's a good idea to post to another thread when the next question is unrelated to the original question posted or if it's an old thread. Also, if a thread gets marked as resolved (like this one will soon), then new replies added might not get seen.

    If the new question *is* related to the original one, then it's fine to add to the same thread and mark the topic as "not resolved."

    In general, it's good to post each question separately too—unless there are a group that area *really* closely related like some of the border questions you asked earlier.

  6. So for the width, there is nothing I could you ? Can't modify it with some code ?... That's too bad for my readers who use a laptop...

    You could try adjusting the width, I do think it's possible—but it's quite an advanced task because of how the theme is setup, and I would really recommend starting with a responsive theme to begin with if you would like a theme with a fluid width that stays mobile-friendly:
    http://theme.wordpress.com/themes/features/responsive-width/

    The 960px width is set on quite a few elements in the Triton Lite theme. Here is an example that just adjust that width and then adds a red border around the .container elements so you can see what's happening:

    .container,
    #logo,
    .one-column #posts,
    .page-template-page-no-sidebar-php #posts,
    .attachment #posts,
    .one-column .single-page-post .post-wrap,
    .page-template-page-no-sidebar-php .post-wrap,
    .attachment .post-wrap,
    .one-column #posts .post-content,
    .page-template-page-no-sidebar-php #posts .post-content,
    .attachment #posts .post-content,
    #slider-wrapper {
    	width: 80%;
    }
    .container {
    	border: 1px solid red;
    }

    As you can see, changing the base width would just be a start. You would need to ensure that the absolutely positioned post containers on the home page had enough space to fit 4 in a row (or more depending on the final width you selected). You would also need to recreate a header image at the new width you choose, and add in a new one manually with a set of CSS rules. The footer column widths would also need to be adjusted. And these are just the things I spotted while looking at the home page. There could be more work needed to adjust things I didn't notice, and this solution doesn't take mobile into account at all.

    If you'd like to give it a try yourself, I think you would need to study CSS a bit more first.

    Another option would be to get a quote from a designer to see if you can hire someone to convert the theme for you. Here is a form you can fill out to ask about that if you're interested:
    http://en.support.wordpress.com/customize-my-site/request-theme-customization/

  7. I wanted to reduce the gap between the widget on my footer, any idea how I can do it ?

    If you look at the CSS using the web inspector in your browser, you'll see that the footer widgets are setup to be 200px wide with a right margin of 35px:

    #footer .widget {
    	margin-right: 35px;
    	width: 200px;
    }

    So one thing you could do would be to adjust those numbers so the right margin is 0 and the width is 235px. Here is an example you can add to your Appearance → Themes → Customize → CSS panel:

    #footer .widget {
    	margin-right: 0;
    	width: 235px;
    }
  8. Thank you for your answers !!! It worked for the footer !
    For the width of the whole thing, I'll give it a try when I'll find some times, thanks !

Topic Closed

This topic has been closed to new replies.

About this Topic