Alter specific Selection Font properties

MorningstarZero

I'm pretty sure this is something simple that needs to be added to our custom.css or something like that (not all that familiar with web design), but....

I need to change the font properties (specifically make them slightly larger and bold) of the 3 highlighted areas pictured above.  They are part of a IR submission form.

Can someone please guide me as to what I need to add/changed?

Thanks!

 

Tom_Hendricks

You are correct, this would be handled in your custom.css file.  You need to add a style to a certain type of element.  I am taking the long approach to answering your question, because it appears somewhat frequently on this site.  Direct answer at the end.

IMO, the easiest way to figure this out now and for future changes you would want to make is to to open the Elements/Inspector tab in your browser's console (Chrome or Firefox recommended, but IE/Edge console will scrape by) and pick the element by clicking on it.  Then you can add styles "live" to see how they will look, before writing them into your custom.css file.

Browser console is opened by pressing F12 in all browsers.  This tutorial is good, but perhaps more in-depth than you really want to get to solve only this problem: https://developers.google.com/web/tools/chrome-devtools/css/

It could be summarized like this (I am using the Firefox and Chrome dev tools interchangeably here--note the similarities):

1. Click this icon
   
    
2. Then while it is highlighted, view your actual web page and click (one of) the type of element that you would like to change (e.g.: the "Description" header in your image)
   
   Before selection:
   
   After selection:
   
   
3. The type of element that appears in the callout may be wrapping the element you actually want, in some cases.  In this case, "Description" actually is a DIV element with the two classes .panel-heading and .requestOffering attached to it.
4. In the dev console, you will see a Styles pane off to the right.  At the top, element.style is an empty style that always refers to whatever you have selected at the moment, which can be used for live experimenting.  The following style (typed between { and }) produces the result you see in the subsequent image:
   
   
   
5. Note that the yellow background extends to the width of the form, because the background of the DIV tag is being set, not merely the background of the text within it.  This result of a quick Google search shows how you could add additional constraints to this style to keep the highlight constrained to the size of the text: https://stackoverflow.com/questions/14310154/how-do-i-set-background-color-of-text-only-in-css (display: table; seems to work best, IMO)
   
6. Finally, copy/paste the contents of this style inside of div.panel-heading.requestOffering { (paste here) } in your custom.css file, it would apply this style to all headings on all request offering forms.

Getting back to the specifics of your question, I suggest adding the following style to your custom.css file:

div.panel-heading.requestOffering {<br>&nbsp; font-size: 1.5em;<br>&nbsp; font-weight: bold;<br>}

Brian_Wiest

Custom.CSS

.panel-heading {
Your CSS code
}

Looking at the page all three use the same class. 

Tom_Hendricks

You are correct, this would be handled in your custom.css file.  You need to add a style to a certain type of element.  I am taking the long approach to answering your question, because it appears somewhat frequently on this site.  Direct answer at the end.

IMO, the easiest way to figure this out now and for future changes you would want to make is to to open the Elements/Inspector tab in your browser's console (Chrome or Firefox recommended, but IE/Edge console will scrape by) and pick the element by clicking on it.  Then you can add styles "live" to see how they will look, before writing them into your custom.css file.

Browser console is opened by pressing F12 in all browsers.  This tutorial is good, but perhaps more in-depth than you really want to get to solve only this problem: https://developers.google.com/web/tools/chrome-devtools/css/

It could be summarized like this (I am using the Firefox and Chrome dev tools interchangeably here--note the similarities):

1. Click this icon
   
    
2. Then while it is highlighted, view your actual web page and click (one of) the type of element that you would like to change (e.g.: the "Description" header in your image)
   
   Before selection:
   
   After selection:
   
   
3. The type of element that appears in the callout may be wrapping the element you actually want, in some cases.  In this case, "Description" actually is a DIV element with the two classes .panel-heading and .requestOffering attached to it.
4. In the dev console, you will see a Styles pane off to the right.  At the top, element.style is an empty style that always refers to whatever you have selected at the moment, which can be used for live experimenting.  The following style (typed between { and }) produces the result you see in the subsequent image:
   
   
   
5. Note that the yellow background extends to the width of the form, because the background of the DIV tag is being set, not merely the background of the text within it.  This result of a quick Google search shows how you could add additional constraints to this style to keep the highlight constrained to the size of the text: https://stackoverflow.com/questions/14310154/how-do-i-set-background-color-of-text-only-in-css (display: table; seems to work best, IMO)
   
6. Finally, copy/paste the contents of this style inside of div.panel-heading.requestOffering { (paste here) } in your custom.css file, it would apply this style to all headings on all request offering forms.

Getting back to the specifics of your question, I suggest adding the following style to your custom.css file:

div.panel-heading.requestOffering {<br>&nbsp; font-size: 1.5em;<br>&nbsp; font-weight: bold;<br>}