Pillar page - navigation and responsiveness

wrobel · ‎03-26-2019

Hi there!

I've prepared pillar content, with couple of ways of navigation (redirecting users to specific place of the pillar content, like for example chapters or top of the pillar).

Pillar is based on two columns:

1) left contain content;

2) right - one of the way of navigation, made by sticky sidebar, following with users and giving them possibility to go to the top in every moment.

Unfortunately pillar is not responsive, because I have changed margins. It was necessary due to making it more readable and user friendly.

I hope I described it clear enough but just in case I sent some pictures.

So is there any option to make a page responsive again without changing margins to previous version? Take a look for attachments, I hope it would be useful. If any furher information will be needed don't be ashamed

Thanks for all advices!

Anton · ‎04-01-2019

Hi @wrobel,

sorry for the delayed answer.

First question: Where exactly do you (want to) change the width? Of which element?

html{}
body{}
.page-center{}
.landing-page{}
.two-column{}

If you change the (max-)width of one of those it's propably gonna affect some other pages/templates.

You can add "pillarpage"(or something like this) to the body classes. It should look like this

landing-page two-column pillarpage (space between the three names;all lowercase;names without spaces)

Then you can do something like:

.pillarpage .page-center{}
.pillarpage .pillarpage-class{}

So basicly you can "call" every group/object/module in the template individually(it can get messy very quick) by typing .pillarpage(replace it with the name you've added as abody-class) in front of it. (Don't do it somewhere "in the middle" of the CSS file!!!) - best-case always at the bottom(or in a seperate CSS file)

If you decide to go with a seperate CSS file it could be the better solution because:

- all changes you do will affect only the templates you assign the seperate CSS to

- you don't mess up your "Theme"

For the HTML part:

- do you have somewhere

{{standard_header_includes}}

in the

<head>
...
</head>

part?

If yes - you will propably will need to override the global loaded CSS(s) by adding your "public url"(I've talked about it in the previous post) to the css after it.

Like this:

<head>
...
{{standard_header_included}}
...
<link href="paste-your URL/code here" rel="stylesheet">
</head>

Cloning a CSS does only make sense(imo) when:

- you want to keep the theme(-pack) CSS untouched

- you want to try out some things but want to have the abbility to "jump" back quickly and compare the results

Best solution would be to go with a seperate CSS

regards

Anton

Did my post help answer your query? Help the Community by marking it as a solution

Anton · ‎03-26-2019

Hi @wrobel,

you should never(!!!) do paddings/margins in the page-build mode(except emails).
The best way(imo) is to do it with classes and mobile-queries.

Add a class like "pillarpage"(or something else) to the group(or whatever you want to behave different on tablet/mobile), go to your main CSS file(or your pillarpage CSS if you have one) and add the desired mobile-queries(with the class) to it.

it should look something like this:

Bildschirmfoto 2019-03-26 um 20.56.32.png in the design-managerin your CSS file

here's a link of "all" media-queries. You can find many informations about them on the web. just search for them

hope this helps

regards,

Anton

Did my post help answer your query? Help the Community by marking it as a solution

wrobel · ‎03-27-2019

Hi Anton!

Thanks for your advice. It's very useful, but I have one more question - how can I change it in CSS file? I changed CSS class, but after that I didn't find this specific template in coded files. Is it possible that coded "version" of this template not exist, because for example it was import and I'm not allowed to do it?

Thank you very much!

Anton · ‎03-27-2019

Hi @wrobel,

you must have a CSS file somewhere. Otherwise it wouldn't be styled at all

Do you mean by "coded" like "HTML"-coded or more like "design manager"-drag&drop coded?

How does your template look?

Something like this:

Bildschirmfoto 2019-03-27 um 22.08.45.png design manager

or something like this

Bildschirmfoto 2019-03-27 um 22.10.00.png "html"-code

If it looks like the design manager screen:
if no element is selected you can see all important template informations on the right sidebar. the first one should be called "liked stylesheet"(or similar) - click on the file which is displayed below it. Thats your CSS file.

In some cases it could be inserted inside the "additional <html>-markup" field. Most likely as (same applies to the "HTML"-coded version)

<link href="{{ get_public_template_url('Marketplace/XXX/Vast_Site_Setup/Coded_Files/vast-modules.css') }}" rel="stylesheet">

If you click yourself through the folders on the left sidebar, you'll find the CSS file.

If you shouldn't find the CSS file at all - simply create a new one

Navigate to the folder your template is located in
optional: create a folder named css(lowercase) inside it
click on file(top left in the left sidebar) and select "create new file"
select the third option "stylesheet"
name it(best case: short,lowercase, without spaces) something like "pillar-media-queries" or so
save it

congrats - you've created a new CSS file

Now you have to link it to the template

If it's a design manager template:

Option 1(very easy):

open the template
click "add" on the top right side of "additional stylesheet"(right sidebar)
search and select the file you've created
as it's a media query file it should be loaded last(best case) so drag&drop it to the bottom of (all) your additional stylesheets

Option 2(easy):

open the CSS file you've created
select "copy public URL" in "options"(left sidebar); the code/URL will be automaticly copied, you need to paste it somewhere
open your pillarpage template
navigate to "additional <head>-markup" and enter

<link href="paste-your URL/code here" rel="stylesheet">

save the template

done

For the coded version:

It's almost the same like the "additional <head>-markup" solution.

After you've created a new(or existing) file(you can copy the public URL from every CSS/JS file):

Open the "HTML"-template
search for other <link> elements or </head> (the slash infront of head is important)
enter the same code as above
- as last <link> element

or

- before the </head> element

Does this helps you?

regards,

Anton

Did my post help answer your query? Help the Community by marking it as a solution

wrobel · ‎03-28-2019

Anton,

thanks for your help! If I change the width in html code it will be impemented to all landings created by this template? I'm asking because I've created a clone version (in design manager) of this template and changed named

and ofcourse CSS-class in right sidebar

But after moving to html stylesheet I'm redirecting to stylesheet that we use to create different landing pages and that made me thinking if i change the code all created landing would be changed also or maybe I have to clone cms-stylesheet?

clone:

Have a nice day!

wrobel

Anton · ‎04-01-2019

Hi @wrobel,

sorry for the delayed answer.

First question: Where exactly do you (want to) change the width? Of which element?

html{}
body{}
.page-center{}
.landing-page{}
.two-column{}

If you change the (max-)width of one of those it's propably gonna affect some other pages/templates.

You can add "pillarpage"(or something like this) to the body classes. It should look like this

landing-page two-column pillarpage (space between the three names;all lowercase;names without spaces)

Then you can do something like:

.pillarpage .page-center{}
.pillarpage .pillarpage-class{}

So basicly you can "call" every group/object/module in the template individually(it can get messy very quick) by typing .pillarpage(replace it with the name you've added as abody-class) in front of it. (Don't do it somewhere "in the middle" of the CSS file!!!) - best-case always at the bottom(or in a seperate CSS file)

If you decide to go with a seperate CSS file it could be the better solution because:

- all changes you do will affect only the templates you assign the seperate CSS to

- you don't mess up your "Theme"

For the HTML part:

- do you have somewhere

{{standard_header_includes}}

in the

<head>
...
</head>

part?

If yes - you will propably will need to override the global loaded CSS(s) by adding your "public url"(I've talked about it in the previous post) to the css after it.

Like this:

<head>
...
{{standard_header_included}}
...
<link href="paste-your URL/code here" rel="stylesheet">
</head>

Cloning a CSS does only make sense(imo) when:

- you want to keep the theme(-pack) CSS untouched

- you want to try out some things but want to have the abbility to "jump" back quickly and compare the results

Best solution would be to go with a seperate CSS

regards

Anton

Did my post help answer your query? Help the Community by marking it as a solution

wrobel · ‎04-05-2019

Anton,

don't worry, thanks for your advices!

Have a nice day!