question on how to change layout of theme (8 posts)

  1. Moses
    Posted 3 years ago #

    i'm working on this site for hair salon using a word press template
    which i managed to change a little and install a nice plug-in for a slide show ...But cant find where and how to do some little css fixes.
    1. i would like to move the transparent page layout to the left
    2. move the icon for the links more to the right
    3. fix the footer a little

    Non of my attempts on the styles. css worked so my question is where should i look to make these changes

    Help would be appreciated

  2. vtxyzzy
    Posted 3 years ago #

    The two items in the header can be controlled by the CSS below:

    #Header .center { right: 50px; width: 1400px; }

    Adjust the numbers to what you want. You should be aware that this may not look right on displays of a different resolution.

    Please explain more what you mean by 'fix the footer a little'.

  3. Moses
    Posted 3 years ago #

    great..its working
    this is what i did -

    #Header .center {
              position: relative;
              right: 50px;
              width: 1200px;

    Questions -
    1. do i need to keep the " position: relative;

    2 how can i fix it a little margin from the left and from the right for the icons.

    3. how can i make the box/page bigger?

    4. there is a big difference in the way the changed appear in IE vs FireFox...is there a way to over came this problem

    thanks again

  4. vtxyzzy
    Posted 3 years ago #

    1. Yes, but I think that it is also inherited so if you remove in the added code, it should still take effect. You did ADD the code to the end of style.css, didn't you?

    2. I looked at your site and do not see the changes. Did you put them at the END of style.css?

    3. Until I can see the added code, I can't answer this.

    4. You can, by adding some conditional styles for IE, but I don't have experience in that area.

  5. Moses
    Posted 3 years ago #

    What do you mean at the END ?

    i added the code like this -

    [CSS code moderated - a link to your site is enough to access the styles - or use the pastebin]

  6. vtxyzzy
    Posted 3 years ago #

    OK - I see it now. (End means last, not in the middle. When I look for the code, it is hard to find if not last.)

    Try adding this to the end of style.css:

    #Container.scroll-pane, .jspContainer { width: 800px !important; }
    .jspPane { width: 775px !important; }
  7. Moses
    Posted 3 years ago #

    cool...now the transparent part is wider
    i think i can play with the size.

    the code looks like this

    #Container {
    width: 605px;
    padding: 10px;
    top: 0px;

    .scroll-pane {

    #Container.scroll-pane, .jspContainer { width: 700px !important; }
    .jspPane { width: 675px !important; }

    Now, since it looks different in IE and firefox ...fire fox there is no margin at all on the left, i think the best solution would be if i put a margin for the fonts and logo ...like 20 px from left

    what is the code for it ?

    thanks for you time

  8. vtxyzzy
    Posted 3 years ago #

    I think you need to change this:

    .jspPane { width: 775px !important; }

    to this:

    .jspPane { width: 775px !important; padding-left: 20px !important;}

    But, I still don't see the code at the end of style.css. I am done!

Topic Closed

This topic has been closed to new replies.

About this Topic


No tags yet.