adding custom pages styling gets thrashed by CSS

My goal is to add a page that maintains the header and footer, but the guts are styled with layout that can be anything. The problem? the font style, size, and line spacing get all messed up.

I searched and found three other posts here that did not solve the problem, including one link from the venerable DhrupDeScoop that lead nowhere:

I can create the page perfectly if view source of an existing elgg page, copy it into my editor, remove the stuff between header and footer and build from there. The page will look just as I want it, but when I copy and paste my the section of HTML out of my editor and into the page that I'd like to modify, all bets are off.
Is there a way to disable the external CSS for my edited section? or possibly disable all CSS and only re-enable for just the header and footer, so my new HTM can behave with my inline styling of elements (and !important doesn't quite fix it)?
This happens in pages and cms pages (plugin) so seems to haunt me no matter what I want to create. Of course, if there's a pointer to how to do this I'd rather just see where it's solve than take up you time. 
Thx.
  • If Elgg's css sets paragraph text to green:

    p {

        color: green;

    }

    and you have a paragraph in your content area between header and footer, the text will be green. If you added a div around your content:

    <div class="aloha-content">

        <p>all my text here</p>

    </div>

    You could add a CSS rule:

    .aloha-content p {

        color: black;

    }

    The real question is why you are styling the content area separately instead of build a new theme. You may get better advice if you explain further what you are trying to do.

  • Thanks Cash.

    I thought I explained what I was doing, but I stand corrected. The goal is to build landing pages for some advertising. To properly test landing pages I would like full creative control to create layouts and design that may not necessarily have the same styling as the rest of the site. For example if I want to test font type and size, I might try fonts at 18, 24, and 32pt for headlines and varying font styles and families to attempt to coordinate with the style of the landing page messaging, tone, and graphics.

    Ideally the designer can build a self contained page so we can rapidly change the pages without having to do server updates of the CSS. The landing pages may be up for a day, two, or slightly longer, and I don't see it being a good use of dev time to have a developer update the CSS every day for 1 page that may last only a day.

    That leads me to styles - I've tried to use styles in the editor tinyMCE and apply them via classes, but the editor removes them, forcing me to do inline styling for sections and elements, where sometimes !important works and other times it doesn't hence my question.  You may be right in that it may be smarter to ask if I can clear styles and create new styles just for those pages.

    so, <style>.aloha-content p { font-family: verdana; font-size:small;}

    is usually deleted by the editor or elgg, and 

    <div style="font-family: verdana; font-size:small;">text</div>

    is overridden as is

    <div style="font-family: verdana; font-size:small !important;">text</div>

    It would be ideal to get local style tags for the page CMS, but since I could not, I've been stuck doing inline CMS. I should have mentioned that first.

     

  • http://community.elgg.org/pg/forum/topic/49119/creating-new-pages/#annotation-180041

    => was moved into General Discusion Group - you'll need to search around there... 

    TinyMCE/HtmlAwed does block loads of tags (for code injection security)

    Some time back I developed somethingy along similar lines for the Human Rights USA Assoc because the client had wanted dynamic control over the (not header/footer but elsewhere) blocks' content.

    I had had to code around the TinyNCE/ HtmlAwed boundaries to get that custom content into the page(s) properly. 

    What particular areas' blocks are you looking to customize ?

  • Dhrup - I actually cited the link you posted in my original lead-in. The link: http://community.elgg.org/pg/groups/24849/external-pages-extended/ goes nowhere useful, sadly. The problem may have already been solved, but the link you refer to:

    http://community.elgg.org/pg/groups/24849/external-pages-extended/

    Give me the msg "The requested group either does not exist or you do not have access to it" 

    bummer

  • i dont understand well zhat is your probleme , but try to do this :

     in views/default/page_elements  add meta tag like this :

    <link rel="stylesheet" href="<?php echo $vars['url']; ?>_css/YOUR_STYLESHEET.css" type="text/css" /> .

    and creat your stylesheet , and save it in _css folder .

    then use your classes created like this :

     <div class="YOUR_CLASS">....</div> .

      sorry for my bad english

  • If I understand you correctly, I would suggest following this logic:

    1. Create a new plugin

    2. Register url handlers to pick up a certain index/content page based on the url

    3. Create views for different ads, and style them as you please

    4. Use elgg_view_layout with say one_column

    5. Render your pages using the views in point 3