css: creating custom class handles?
I'm new to captivate, and am trying to understand the output it is generating. I had hoped to be able to create some style rules that can,, among other things, be used to call specific fonts for specific content types. I have figured out how to include an external css file for my overrides, and in that file I used @11220649-face to include bold, regular, and light versions of a font. So far so good. But how can I tell the title elements on a slide to use the bold font? and the body to use the regular font? also... is it possible to have part of a text string bold? For example, if in the middle of a paragraph you want a few words to be bold... how do you do that?
Here's an example of a title for a true/false slide. I'd love to be able to set a style on an <h> tag or something... perhaps even a classname like class="slide title" This markup makes very little sense to me:
<div id="si5305" class="cp-frameset" tabindex="-1" style="outline-style: none; z-index: 3; display: block; position: absolute; left: 87px; top: 6.061%; right: auto; bottom: auto; width: 83.008%; height: 11.962%;">
<div id="si5305accStr" class="cp-accessibility">
<p>True/False </p>
</div>
<div id="si5305_vTxtHandlerHolder" style="display: block; position: absolute; width: 850px; height: 75px; visibility: hidden; left: 0px; top: 0px;"></div>
</div>
cp-accessibility is set to not be visible... so I assume its meant to be invisible and only for accessibility concerns... but... the following div appears to govern the actual element on the screen and I see no text in it! Is this some kind of replacement thing?
The CPM.js file seems like a place to look... although the thought of maintaining it seems daunting. The code there looks different though... There, that element looks like this (inside of a JSON string):
,vt:'<div><div style="margin-left:0px;display:block;text-align:center;"><span class="cp-actualText" style="line-height:100%;color:#252525;font-size:58px;font-family:\'Proxima Nova\';"><span style="font-weight:bold;">True/False</span></span><span class="cp-actualText" style="line-height:100%;color:#252525;font-size:58px;font-family:\'Proxima Nova\';"><br></span></div></div>',
Well... here I at least have some markup to inspect, although I would wish that rather than spans there was some kind of a distinct handle or HTML tag to talk to. cp-actualText is present whether we are looking at a title element or a body element, for example. In this case I would want to tell this element to use 'Proxima Nova Bold', which is noticeably different that 'Proxima Nova' that has been bolded in this manner.
I hope somebody out there has some insight to share with me. How do people work with this? The code in the CPM style is flattened into one line, which makes it a little hard to navigate. If I break it up for legibility it looks like this (This is the code for the title 'True/False' on slide 5305):
si5305: {
type:86,from:181,to:271,rp:0,rpa:0,mdi:'si5305c',immo:false,apsn:'Slide5268',
vt:'<div>
<div style="margin-left:0px;display:block;text-align:center;">
<span class="cp-actualText" style="line-height:100%;color:#c00;font-size:58px;font-family:\'Proxima Nova\';">
<span style="font-weight:bold;">True/False</span>
</span>
<span class="cp-actualText" style="line-height:100%;color:#252525;font-size:58px;font-family:\'Proxima Nova\';"><br></span>
</div></div>',
offsets:[0,0,0,0],
rplm:{414:0,768:0,1024:0},
rprm:{414:0,768:0,1024:0},
rptm:{414:0,768:0,1024:0},
rpbm:{414:0,768:0,1024:0},
rpta:{414:2,768:2,1024:2},
rptl:{414:1,768:1,1024:1},
rpvt:{
414:{vt:'<div>
<div style="margin-left:0px;display:block;text-align:center;">
<span class="cp-actualText" style="line-height:100%;color:#c00;font-size:30px;font-family:\'Proxima Nova\';">
<span style="font-weight:bold;">True/False</span>
</span>
<span class="cp-actualText" style="line-height:100%;color:#c00;font-size:30px;font-family:\'Proxima Nova\';"><br></span>
</div></div>',
text:'True/False'},
768:{vt:'<div>
<div style="margin-left:0px;display:block;text-align:center;">
<span class="cp-actualText" style="line-height:100%;color:#c00;font-size:46px;font-family:\'Proxima Nova\';">
<span style="font-weight:bold;">True/False</span>
</span>
<span class="cp-actualText" style="line-height:100%;color:#c00;font-size:46px;font-family:\'Proxima Nova\';"><br></span>
</div></div>',
text:'True/False'},
1024:{vt:'<div>
<div style="margin-left:0px;display:block;text-align:center;">
<span class="cp-actualText" style="line-height:100%;color:#c00;font-size:58px;font-family:\'Proxima Nova\';">
<span style="font-weight:bold;">True/False</span>
</span>
<span class="cp-actualText" style="line-height:100%;color:#c00;font-size:58px;font-family:\'Proxima Nova\';"><br></span>
</div></div>',
text:'True/False'
}
}
I assume the redundancy is for the responsive layouts (breakpoints 414, 768, and 1024). If I go in to the block for 1024 to the span inside of accessibility and change it to:
<span style="font-weight:bold;" class="slideTitle">True/False</span>
I get something I can work with... because in my css I can say:
.slideTitle {font-family: 'ProximaNovaBold' !important; }
I DO have to make it !important for this to work... but it works. So... the question is... How can I effectively do this for all title elements? This approach feels a little 'hacky' and is bounds to be a maintainability concern. Am I thinking about this wrong? Any insight or feedback would be most appreciated!
AdChoices