Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Fuji Kusaka 2203 posts 4220 karma points
    Sep 29, 2011 @ 20:03
    Fuji Kusaka
    0

    Changing Css properties from dashboard

    Hi all,

    Does anyone have any suggestion on how i can possibly give a user the ability to change some css properties after creating a node page through the dashboard istelf using either dataTypes?

    What i need to be able is to give client the possibility to change an absolute position of a layer. That  is either Top or Right.

     

    Any thoughts ??

    Fuji

  • Phil 12 posts 32 karma points
    Sep 29, 2011 @ 20:37
    Phil
    0

     

    There’s probably a more elegant way to do it but I would treat it the same as a dynamically entered metadata tag. Put a content placeholder in the header, and add the content via the page template,  <style…> etc,  and the info in the normal way via a page field.

     

  • Fuji Kusaka 2203 posts 4220 karma points
    Sep 29, 2011 @ 20:53
    Fuji Kusaka
    0

    Hi Phil,

    Yes that might be a solution but i already have this working but dynamically changing the stylesheet using Data Type. But here the user will not hava range of predefine values. He will be able to enter his own value.

  • Mike Chambers 636 posts 1253 karma points c-trib
    Sep 30, 2011 @ 10:24
    Mike Chambers
    0

    rather than thinking the suggestion from phil is for an external style sheet... you can have the user enter inline css...

    eg

    <style type="text/css">
    hr {color:sienna;}
    p {margin-left:20px;}
    body {background-image:url("images/back40.gif");}
    </style>

    http://www.w3schools.com/css/css_howto.asp is a reasonable reference...

    quote...

    Styles can be specified:

    • inside an HTML element
    • inside the head section of an HTML page
    • in an external CSS file

    Tip: Even multiple external style sheets can be referenced inside a single HTML document.

    Cascading order

    What style will be used when there is more than one style specified for an HTML element?

    Generally speaking we can say that all the styles will "cascade" into a new "virtual" style sheet by the following rules, where number four has the highest priority:

    1. Browser default
    2. External style sheet
    3. Internal style sheet (in the head section)
    4. Inline style (inside an HTML element)

    So, an inline style (inside an HTML element) has the highest priority, which means that it will override a style defined inside the <head> tag, or in an external style sheet, or in a browser (a default value).

     

  • Fuji Kusaka 2203 posts 4220 karma points
    Sep 30, 2011 @ 11:58
    Fuji Kusaka
    0

    Hi Mike,

    Well I did something different, but got it working.I'll will write it down and may be someone will benefit from this.

    1. Create an DataType Integer.

    2. Then just add 2 new fields in my document Type using the DataType I created before. In my situation i needed to make sure the client has the ability to change the properties of the an Absolute Position of a  div container. ( top:0px; and left:0px;) position. So now I just have to make sure that there is a validation so that the widget is not out of scope. I added a validation where I specify the range that is lets say from left to right something like

    \b0*([0-9]|[1-9][0-9]|[0-7][0-9][0-9]|800)\b

    3. I my template is just have to add the itemField to the div and making sure it does have a top and left value even if user leaves the fields empty.

    <div class="widget" style="<umbraco:Item field='topPosition' textIfEmpty='100' insertTextBefore='top:' insertTextAfter='px;' recursive='true' stripParagraph='true' runat='server' /> <umbraco:Item field='rightPosition' textIfEmpty='100' insertTextBefore='left:' insertTextAfter='px;' recursive='true' stripParagraph='true' runat='server' />">
            <a href="#"></a>
    </div>


    //fuji

     

     

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies