[xwiki-users] Adding css style to page
Hi Folks, I'm struggling with something I thought should be quite simple. I want to style a series of elements in a page (box macro) so want to just define a css style for this just for this one page. I was trying to set styles using html content like this: {{html}}<style> h1 {color:red;} p {color:blue;} </style> {{/html}} but the style definition is not getting included (though in other cases like this {{html}}<b>bold text</b>{{/html}} its working as expected). What am I doing wrong here? Thanks Tim
Hi Tim,
On 20 Aug 2016, at 14:32, Tim Dudgeon <[email protected]> wrote:
Hi Folks,
I'm struggling with something I thought should be quite simple. I want to style a series of elements in a page (box macro) so want to just define a css style for this just for this one page. I was trying to set styles using html content like this:
{{html}}<style> h1 {color:red;} p {color:blue;} </style> {{/html}}
but the style definition is not getting included (though in other cases like this {{html}}<b>bold text</b>{{/html}} its working as expected).
What am I doing wrong here?
BTW it’s not a good web practice to put CSS inside the HTML body. I suggest using http://platform.xwiki.org/xwiki/bin/view/DevGuide/SkinExtensionsTutorial Can you try with this and see if it helps? Thanks -Vincent PS1: You can use your browser dev tool to see what CSS you need to write to style what you want PS2: The box macro supports defining some css class that can be added, see http://extensions.xwiki.org/xwiki/bin/view/Extension/Box+Macro#HParametersde...
Thanks Tim
Vincent, thanks. The SkinExtensions did the trick. I did find one strange thing in that the first style definition was ignored. I needed to put some dummy style at the start to get the one I needed to work. <style> p.random_as_first_line_is_ignored {} # never gets into the html div.example { # this one does padding-top: 8px; padding-bottom: 5px; font-family: monospace; color: green; } </style> This is with version 7.4.2. Tim On 20/08/2016 13:56, Vincent Massol wrote:
Hi Tim,
On 20 Aug 2016, at 14:32, Tim Dudgeon <[email protected]> wrote:
Hi Folks,
I'm struggling with something I thought should be quite simple. I want to style a series of elements in a page (box macro) so want to just define a css style for this just for this one page. I was trying to set styles using html content like this:
{{html}}<style> h1 {color:red;} p {color:blue;} </style> {{/html}}
but the style definition is not getting included (though in other cases like this {{html}}<b>bold text</b>{{/html}} its working as expected).
What am I doing wrong here? BTW it’s not a good web practice to put CSS inside the HTML body. I suggest using http://platform.xwiki.org/xwiki/bin/view/DevGuide/SkinExtensionsTutorial
Can you try with this and see if it helps?
Thanks -Vincent
PS1: You can use your browser dev tool to see what CSS you need to write to style what you want PS2: The box macro supports defining some css class that can be added, see http://extensions.xwiki.org/xwiki/bin/view/Extension/Box+Macro#HParametersde...
Thanks Tim
users mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/users
On 20 Aug 2016, at 16:20, Tim Dudgeon <[email protected]> wrote:
Vincent,
thanks. The SkinExtensions did the trick.
I did find one strange thing in that the first style definition was ignored. I needed to put some dummy style at the start to get the one I needed to work.
<style> p.random_as_first_line_is_ignored {} # never gets into the html
div.example { # this one does padding-top: 8px; padding-bottom: 5px; font-family: monospace; color: green; } </style>
Note that you shouldn’t put <style> inside the SSX. To verify what happens, use the view source feature of your browser and locate the line in the <head> that’s like: <link rel="stylesheet" type="text/css" href=“<URL to your SSX wiki page>”/> When open the <URL to your SSX wiki page> in your browser and you’ll see what gets executed. Thanks -Vincent
This is with version 7.4.2.
Tim
On 20/08/2016 13:56, Vincent Massol wrote:
Hi Tim,
On 20 Aug 2016, at 14:32, Tim Dudgeon <[email protected]> wrote:
Hi Folks,
I'm struggling with something I thought should be quite simple. I want to style a series of elements in a page (box macro) so want to just define a css style for this just for this one page. I was trying to set styles using html content like this:
{{html}}<style> h1 {color:red;} p {color:blue;} </style> {{/html}}
but the style definition is not getting included (though in other cases like this {{html}}<b>bold text</b>{{/html}} its working as expected).
What am I doing wrong here? BTW it’s not a good web practice to put CSS inside the HTML body. I suggest using http://platform.xwiki.org/xwiki/bin/view/DevGuide/SkinExtensionsTutorial
Can you try with this and see if it helps?
Thanks -Vincent
PS1: You can use your browser dev tool to see what CSS you need to write to style what you want PS2: The box macro supports defining some css class that can be added, see http://extensions.xwiki.org/xwiki/bin/view/Extension/Box+Macro#HParametersde...
Thanks Tim
Thanks. Omitting the <style> tags solved it. Thanks for your help with this. Tim On 20/08/2016 17:26, Vincent Massol wrote:
On 20 Aug 2016, at 16:20, Tim Dudgeon <[email protected]> wrote:
Vincent,
thanks. The SkinExtensions did the trick.
I did find one strange thing in that the first style definition was ignored. I needed to put some dummy style at the start to get the one I needed to work.
<style> p.random_as_first_line_is_ignored {} # never gets into the html
div.example { # this one does padding-top: 8px; padding-bottom: 5px; font-family: monospace; color: green; } </style> Note that you shouldn’t put <style> inside the SSX.
To verify what happens, use the view source feature of your browser and locate the line in the <head> that’s like:
<link rel="stylesheet" type="text/css" href=“<URL to your SSX wiki page>”/>
When open the <URL to your SSX wiki page> in your browser and you’ll see what gets executed.
Thanks -Vincent
This is with version 7.4.2.
Tim
On 20/08/2016 13:56, Vincent Massol wrote:
Hi Tim,
On 20 Aug 2016, at 14:32, Tim Dudgeon <[email protected]> wrote:
Hi Folks,
I'm struggling with something I thought should be quite simple. I want to style a series of elements in a page (box macro) so want to just define a css style for this just for this one page. I was trying to set styles using html content like this:
{{html}}<style> h1 {color:red;} p {color:blue;} </style> {{/html}}
but the style definition is not getting included (though in other cases like this {{html}}<b>bold text</b>{{/html}} its working as expected).
What am I doing wrong here? BTW it’s not a good web practice to put CSS inside the HTML body. I suggest using http://platform.xwiki.org/xwiki/bin/view/DevGuide/SkinExtensionsTutorial
Can you try with this and see if it helps?
Thanks -Vincent
PS1: You can use your browser dev tool to see what CSS you need to write to style what you want PS2: The box macro supports defining some css class that can be added, see http://extensions.xwiki.org/xwiki/bin/view/Extension/Box+Macro#HParametersde...
Thanks Tim
users mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/users
participants (2)
-
Tim Dudgeon -
Vincent Massol