Focal Point
[Solved]Styling multiple drill background color & Fonts

This topic can be found at:
https://forums.informationbuilders.com/eve/forums/a/tpc/f/7971057331/m/2427084516

January 16, 2012, 06:55 AM
Nordin Ben Ahmed
[Solved]Styling multiple drill background color & Fonts
Goodmorning Webfocus users,


Is there any way 2 change the styling of a multidrill report? (I mean The pop-up multidrill box)
I get the standard blue background and white font.

But I want 2 apply a style of my own.


I already searched en looked in DS for every possible option, but I can't believe that this option is not available.

Thanx in advance,

Nordin


We currently using WF version 7703
And running Windows XP Pro

This message has been edited. Last edited by: Nordin Ben Ahmed,
January 16, 2012, 07:12 AM
Wep5622
You can override the stylesheet rules that IBI provides. Don't forgot to tack a !important after your rules Wink

For example:
div.clsMDMenu {
	background-color: #d0d0d0 !important;
	border-width: 1px 2px 2px 1px !important;
	border-style: solid !important;
	border-color: #f0f0f0 #404040 #404040 #f0f0f0 !important;
	padding: 4px 0 !important;
}

div.clsMDMenu a {
	margin: 0;
	padding: 0;
	width: 100%;
	display: inline-block;
}

div.clsMDMenu a,
div.clsMDMenu a:hover,
div.clsMDMenu a:active,
div.clsMDMenu a:focus {
	border: none !important;
	outline: none !important;
}

div.clsMDMenu a,
div.clsMDMenu a:hover {
	color: black !important;
	font-family: Arial, sans-serif !important;
	font-size: 10pt !important;
	font-weight: bold !important;
}

div.clsMDMenu a:hover,
div.clsMDMenu a:focus {
	background-color: #1e3e7b !important;
	color: white !important;
	text-decoration: none !important;
}

div.clsMDMenu a span,
div.clsMDMenu a:hover span,
div.clsMDMenu a:focus span {
	font-family: Arial, sans-serif;
	font-size: 10pt;
	font-weight: bold;
	text-decoration: none !important;
}

div.clsMDMenu a span {
	color: black !important;
	display: inline-block;
	padding: 2px 8px !important;
}

div.clsMDMenu a:hover span,
div.clsMDMenu a:focus span {
	color: white !important;
}



WebFOCUS 8.1.03, Windows 7-64/2008-64, IBM DB2/400, Oracle 11g & RDB, MS SQL-Server 2005, SAP, PostgreSQL 11, Output: HTML, PDF, Excel 2010
: Member of User Group Benelux :
January 16, 2012, 07:41 AM
Nordin Ben Ahmed
Hi Wep5622,

Thanx for the quick reply.

I am Not familiar with Javascript.

So I did not understand where 2 put that script and what 2 change.

If I give you an example of a report.
Could you show me how 2 use your script?


TABLE FILE CAR
LIST
COUNTRY SALES
BY CAR
ON TABLE HOLD AS H1
END
DEFINE FILE H1
FLAG/I1 = IF COUNTRY EQ 'ENGLAND' OR SALES GT 5000 THEN 1 ELSE 0;
END
TABLE FILE H1
PRINT
H1.H1.COUNTRY
H1.H1.SALES
H1.H1.FLAG NOPRINT
H1.H1.LIST
BY H1.H1.CAR
ON TABLE NOTOTAL
ON TABLE PCHOLD FORMAT HTML
ON TABLE SET HTMLCSS ON
ON TABLE SET STYLE *
UNITS=IN,
LEFTMARGIN=0.000000,
RIGHTMARGIN=0.000000,
TOPMARGIN=0.000000,
BOTTOMMARGIN=0.000000,
SQUEEZE=ON,
ORIENTATION=LANDSCAPE,
$
TYPE=REPORT,
BORDER-TOP=MEDIUM,
BORDER-BOTTOM=MEDIUM,
BORDER-LEFT=MEDIUM,
BORDER-RIGHT=MEDIUM,
BORDER-TOP-COLOR='WHITE',
BORDER-BOTTOM-COLOR='WHITE',
BORDER-LEFT-COLOR='WHITE',
BORDER-RIGHT-COLOR='WHITE',
FONT='ARIAL',
SIZE=9,
COLOR='BLACK',
BACKCOLOR='SILVER',
STYLE=NORMAL,
RIGHTGAP=0.125000,
TOPGAP=0.013889,
BOTTOMGAP=0.027778,
$
TYPE=DATA,
COLUMN=N1,
FONT='ARIAL',
SIZE=9,
COLOR='BLACK',
BACKCOLOR='SILVER',
STYLE=NORMAL,
DRILLMENUITEM='DrillDown 1',
URL=https://www.yahoo.com,
TARGET='_blank',
DRILLMENUITEM='DrillDown 2',
URL=https://www.msn.com,
TARGET='_blank',
$
TYPE=DATA,
COLUMN=N1,
STYLE=BOLD,
WHEN=N4 GT 0,
FOCEXEC=app/kk.fex( \
KIRAN=H1.H1.CAR \
),
$
TYPE=DATA,
COLUMN=N1,
BACKCOLOR='NONE',
WHEN=N5 GT 1,
$
TYPE=TITLE,
COLUMN=N1,
FONT='ARIAL',
SIZE=11,
COLOR='WHITE',
BACKCOLOR='MAROON',
STYLE=BOLD,
DRILLMENUITEM='DrillDown 1',
URL=https://www.yahoo.com,
TARGET='_blank',
DRILLMENUITEM='DrillDown 2',
URL=https://www.msn.com,
TARGET='_blank',
$
TYPE=TITLE,
COLUMN=N2,
FONT='ARIAL',
SIZE=11,
COLOR='WHITE',
BACKCOLOR='MAROON',
STYLE=BOLD,
$
TYPE=TITLE,
COLUMN=N3,
FONT='ARIAL',
SIZE=11,
COLOR='WHITE',
BACKCOLOR='MAROON',
STYLE=BOLD,
$
TYPE=TITLE,
COLUMN=N4,
FONT='ARIAL',
SIZE=11,
COLOR='WHITE',
BACKCOLOR='MAROON',
STYLE=BOLD,
$
TYPE=TITLE,
COLUMN=N5,
FONT='ARIAL',
SIZE=11,
COLOR='WHITE',
BACKCOLOR='MAROON',
STYLE=BOLD,
$
TYPE=REPORT,
COLUMN=N1,
FONT='ARIAL',
SIZE=9,
COLOR='BLACK',
BACKCOLOR='SILVER',
STYLE=NORMAL,
$
ENDSTYLE
END

Thanx again,

Nordin
January 16, 2012, 09:11 AM
Wep5622
quote:
I am Not familiar with Javascript.


Clearly you aren't! That's not Javascript, that's CSS Wink

You can save that to a .css file on your web-server (in the approot server path), and then you can link it either using
-HTMLFORM BEGIN
<link rel="stylesheet" type="text/css" href="http://your.server_url/where/you_saved_it.css"/>
-HTMLFORM END
or by using
ON TABLE SET CSSURL http://your.server_url/where/you_saved_it.css



WebFOCUS 8.1.03, Windows 7-64/2008-64, IBM DB2/400, Oracle 11g & RDB, MS SQL-Server 2005, SAP, PostgreSQL 11, Output: HTML, PDF, Excel 2010
: Member of User Group Benelux :
January 16, 2012, 10:12 AM
Nordin Ben Ahmed
HI Wep5622,

LOL It is indeed CSS (not that I see the difference)

I followed your instructions and it Works!

Thanx,

Nordin