Styling Links

Content Layer

name	Page Info
id	278129461
class	watermark-layer

Content Column

name	Page Body
width	100.00001%
id	278129463

Content Block

background-color	transparent
name	Prompt
id	494677873
class	tight manual-prompt-flex

Designing link appearance at the theme level.

Content Block

name	Outcome
rich-link-hovers	true
id	1042866408
class	tight manual-outcome-flex

A core design decision when creating a theme is to decide how links will consistently appear to the end user.

Content Block

name	Steps
rich-link-hovers	true
id	494842117
class	steps-block numbered manual-steps-flex

Open the Links accordion in the Theme Designer.

HTML Wrap

tag	span
class	product-navigation

Theme Press Designer → Theme Tab → Content → Links

Open the expanders in the following areas to adjust color and border style for each:

Links

Branding your site might include theming your link's style.

To define styling for links

^{Them Press Control Panel > Theme tab > Content expander > Links}

You can style the following:

LinksImage Removed
Hover Links
Heading Hover Links
Create Links

With these options:

Text color

Width of text underline

Style of line

Color of line

[[screenshot needed: link area of designer]]

Content Block

name	Note
rich-link-hovers	true
id	495965127
class	manual-note-flex
collapsible	collapse

Note

If using:

Replace me with something to note about this how-to entry that falls outside the scope of all other sections; and
Add the tight-bottom class to the Steps block above to narrow the gap between the two blocks.

Content Block

name	Tip
rich-link-hovers	true
id	894522670
class	manual-tip-flex
collapsible	collapse

Tip

If using:

Replace me with something to note about this how-to entry that falls outside the scope of all other sections; and
Add the tight-bottom class to the next visible/non-collapsed block above this one to narrow the gap between the two blocks.

Content Block

name	Warning
rich-link-hovers	true
id	894530759
class	manual-warning-flex
collapsible	collapse

Warning

If using:

Replace me with something to note about this how-to entry that falls outside the scope of all other sections; and
Add the tight-bottom class to the next visible/non-collapsed block above this one to narrow the gap between the two blocks.

Content Block

name	Info
rich-link-hovers	true
id	894537203
class	manual-info-flex
collapsible	collapse

Info

If using:

Replace me with something to note about this how-to entry that falls outside the scope of all other sections; and
Add the tight-bottom class to the next visible/non-collapsed block above this one to narrow the gap between the two blocks.

Content Layer

background-color	$lightGrayColor
name	Related
id	888168050

Content Column

name	Related
width	100%
id	888168051

Content Block

rich-links-hide-description	true
rich-link-hovers	true
rich-links-columns	4
rich-links-vertical	true
rich-links-image-height	100px
rich-links-hide-site-icon	true
rich-links-details-padding	10px
name	Related
rich-links-enable	true
border-width	0
rich-links-details-alignment	left
rich-links-margin	20px 30px 0 0
id	496234544
class	related-block clean manual-related-flex

Page tree

Transform Your Digital Workplace

Industry Expertise

Inform Your Strategic Direction

Redefining Work

Documentation and Support

Versions Compared

Old Version 8

New Version 9

Key

Open the Links accordion in the Theme Designer.

Open the expanders in the following areas to adjust color and border style for each:

To define styling for links

You can style the following:

With these options:

Platform

Company

Support

Brikit Services