Not logged in. · Lost password · Register
Forum: General Help and Support Templates and Layout RSS
Using a color variable in embedded html
Avatar
Al #1
Member since Apr 2015 · 8 posts
Group memberships: Members
Show profile · Link to this post
Subject: Using a color variable in embedded html
I can use the following html in my dokuwiki page to change the background color of a table cell, but how do I get it to accept a variable color that I only need to define once, for example in a style sheet or template?

| <html>
<td style = background:red>
XXX
</td>
</html>  |

ps. I have tried using the style.ini replacement colors by name, like:
background:__background_alt__
or
background:@ini_background_alt,
but that doesn't work.
Avatar
yinken #2
Member since Aug 2014 · 37 posts
Group memberships: Members
Show profile · Link to this post
You can use the wrap plugin for this. You use the syntax
<WRAP tablename>...</WRAP>
around your your table which then lets you add custom css to your table, using the userstyle.css in the conf/ Folder.

For example:

.wrap_tablename td {background:red;}

would turn all cells in that particular table red.
Avatar
Al #3
Member since Apr 2015 · 8 posts
Group memberships: Members
Show profile · Link to this post
Many thanks yinken

I am only trying to highlight specific table cells, not all of them. So I set certain cells to a particular background color (I can do this either with the embedded html or with the cellbg plugin), and I do this in thousands of places. If I decide to change my highlight color one day, I only want to do it in one place and have it reflect everywhere. Is this possible?
Avatar
yinken #4
Member since Aug 2014 · 37 posts
Group memberships: Members
Show profile · Link to this post
That is possible, also using the wrap plugin.

Your table:
<WRAP yourtable>
|<WRAP green>GREEN</WRAP>|test|test|
|test|test|<WRAP red>RED</WRAP>|
|test|test|test|
|<WRAP orange>ORANGE</WRAP>|test|test|
</WRAP>

Your CSS:
.wrap_yourtable p, .wrap_yourtable td {padding:0px;margin:0px}
.wrap_red {background-color: #e70e18;}
.wrap_green {background-color: #008800;}
.wrap_orange {background-color: #e7790e;}

Basically, you are not changing the background color of the cell but of the <DIV> inside the cell. For this to look properly, the <p> and <td> tags need to have margin and padding set to 0.
Avatar
Al #5
Member since Apr 2015 · 8 posts
Group memberships: Members
Show profile · Link to this post
Yinkin, thank you so much - that works perfectly!
Avatar
Al #6
Member since Apr 2015 · 8 posts
Group memberships: Members
Show profile · Link to this post
In reply to post #4
IGNORE (SOLVED):
One last question: using this solution re-sizes the table width to 100% of the page. Is there any way I can make the table width remain as is?
This post was edited on 2015-04-16, 15:02 by Al.
Avatar
ach (Administrator) #7
Member since May 2006 · 1910 posts · Location: Folkestone, UK
Group memberships: Administrators, Members, Super Mods, Wiki Managers
Show profile · Link to this post
In reply to post #4
Quote by yinken on 2015-04-16, 11:43:
.wrap_red {background-color: #e70e18;}
.wrap_green {background-color: #008800;}
.wrap_orange {background-color: #e7790e;}

I would suggest to rather name the classes after what they actually *do* and not what they look like. E.g. if everything in a red colour means the number in a cell will have a negative value, I would call the class "negative". Or if everything in a blue colour means they belong to Team X, I would call it "team-x", etc.
Avatar
ach (Administrator) #8
Member since May 2006 · 1910 posts · Location: Folkestone, UK
Group memberships: Administrators, Members, Super Mods, Wiki Managers
Show profile · Link to this post
In reply to post #6
Quote by Al on 2015-04-16, 13:44:
IGNORE (SOLVED):
One last question: using this solution re-sizes the table width to 100% of the page. Is there any way I can make the table width remain as is?

If it is solved, it makes sense to share your solution so that other people will benefit from it as well.

With the code example above:
.wrap_yourtable table {
  width: auto;
}
Avatar
florious #9
User title: Floarea
Member since Jun 2014 · 19 posts
Group memberships: Members
Show profile · Link to this post
I was not able to force  the color to fill the cell all the way down in a Table using wrap. The following solution is working quite ok:

.wrap_table-nocell-border-red table.inline {
    width: auto;
    border: 2px solid #FED1CD;
    border-collapse: collapse;
    background-color: #FFF5F5;
}
/*HEADER*/
.wrap_table-nocell-border-red table.inline th {
    border: 0px solid #FFFFFF;
    background-color: #FED1CD;
}
/*Corpul tabelului*/
.wrap_table-nocell-border-red table.inline td {
    border: 0px solid #FFFFFF;
}
/* pt. umplere culoare celula  */
.wrap_table-nocell-border-red table p, td {
    padding:0%;
    margin:0px;
}

.wrap_cell-blue {background-color: #d7ecff; border:0.2px solid #d7ecff; }
.wrap_cell-green {background-color: #A3FD63; border:0.2px solid #A3FD63; }
.wrap_cell-red {background-color: #FF577E; border:0.2px solid #FF577E; }
.wrap_cell-orange {background-color: #FF961F; border:0.2px solid #FF961F; }

From What I know so far, Cellbg is a plugin that solve complete and perfect the table cell color.
Avatar
turnermm (Moderator) #10
Member since Oct 2009 · 4628 posts · Location: Canada
Group memberships: Global Moderators, Members, Super Mods
Show profile · Link to this post
See https://forum.dokuwiki.org/post/65373
Myron Turner
github: https://github.com/turnermm
plugins, templates: http://www.mturner.org/devel
Close Smaller – Larger + Reply to this post:
Verification code: VeriCode Please enter the word from the image into the text field below. (Type the letters only, lower case is okay.)
Smileys: :-) ;-) :-D :-p :blush: :cool: :rolleyes: :huh: :-/ <_< :-( :'( :#: :scared: 8-( :nuts: :-O
Special characters:
Go to forum
Imprint
This board is powered by the Unclassified NewsBoard software, 20150713-dev, © 2003-2015 by Yves Goergen
Current time: 2019-05-24, 10:17:48 (UTC +02:00)