Please upgrade here. These earlier versions are no longer being updated and have security issues.

Apply CSS to Custom Pages? - Shift Content Over

This discussion is related to the Custom Pages addon.

Created this "contact" page through Custom Pages plugin. Is it possible to shift the content of the page over a bit by creating a custom.css? There currently is no .css file within Custom Pages plugin. Want to shift it over to the red line, but not shift the content of the rest of the forum.

image

It's like this b/c I've widened the content of my forum through /applications/dashboard/design/style.css and through the custom.css, increasing pixels in #body and #content.

Comments

  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    First mistake:

    widened the content of my forum through /applications/dashboard/design/style.css

    you have been here long enough to know by now that the place for all the css edits is done in the custom.css , why? because if you change themes your changes will affect those too in case you want to change and you will have to edit that file again, plus if you update your changes will be gone bye bye.

    Second Mistake:

    increasing pixels in #body and #content.

    what body and what content ? every page is a body and each has it's content area.
    First you need to find out what body it is you are working on;

    body.Plugin.CustomPages ?

    Third mistake, you supplied no link to view the problem.

    UnderDog
  • Sorry, I should have been more specific:

    First mistake:

    I changed the style.css below:

    #Content { float: left; width: 880px; margin: 0 0 40px; }

    But will reset that and edit the custom.css as you have suggested.

    Second mistake:

    within the custom.css, I made this change to widen the body:

    #Body { width: 1100px; text-align: left; margin: 50px auto 55px; }

    Third mistake:

    Thought the attached image was enough, but link to contact page is: http://idenitties.com/contact

  • Could I add something as simple as: $Sender->AddCssFile('custompages.css','plugins/CustomPages/');

    To link a newly created css file?

  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    Thanks, the link is very important for speedy result , no need to add another stylesheet when you can put the code in the custom.css which has priority over others, if something does not want to do what you want add !important to it.

    body.Dashboard.Plugin #Content {
    float: none;
    width: 830px;
    margin: 0 auto;
    }
    

    you will likely need to edit other parts, just add the body class like I did there before the other elements.

    kirkpa31
  • You really are a CSS Addict. Thank you!

    vrijvlinder
  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    You are welcome , but I am just good with firebug. You should work with it all the time and learn all of the tricks it can offer.

    kirkpa31
  • This exact code, entered in my custom.css, centered all 3 Custom Pages I have and the Members List Enhanced plugin:

    body.Dashboard.Plugin #Body { float: center; width: 830px; margin: 50px auto 55px; }

    Thanks again, Vrijvlinder.

  • vrijvlindervrijvlinder Papillon-Sauvage MVP
    edited March 2013

    There is no float:center , only float:left float:right and float:none

    I would remove that float and use margin:0 auto; so it stays in the center when the window gets bigger.

    # Body is not he same as body . body is the whole page and #Body is the stuff below the #Head where the #Content and #Panel reside. you would also want the #Body to be 100% 
    
    think of it as the box that contains other boxes and if you change the size in one it may affect the others. you decide on the max width of what you want first. Then everything else must abide by that. so if your #Body is 100% then you can make the rest of the elements any size you want without moving around the page. It is tricky to get this to all work. 
    

    Best get to know the proper rules to apply

    http://www.w3schools.com/cssref/pr_class_float.asp

    UnderDog
Sign In or Register to comment.