CMS Development

wrobel
Mitglied

Pillar page - navigation and responsiveness

lösung

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! 🙂

 

pillar_margins.pngpillar_navigation_arrow.pngpillar_responsiveness.png

 

0 Upvotes
1 Akzeptierte Lösung
Anton
Lösung
Trendsetter/-in | Diamond Partner
Trendsetter/-in | Diamond Partner

Pillar page - navigation and responsiveness

lösung

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

check.png Did my post help answer your query? Help the Community by marking it as a solution
Anton Bujanowski Signature

Lösung in ursprünglichem Beitrag anzeigen

6 Antworten
Anton
Trendsetter/-in | Diamond Partner
Trendsetter/-in | Diamond Partner

Pillar page - navigation and responsiveness

lösung

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:

in the design-managerin the design-managerin your CSS filein 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

 

check.png Did my post help answer your query? Help the Community by marking it as a solution
Anton Bujanowski Signature
wrobel
Mitglied

Pillar page - navigation and responsiveness

lösung

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!

0 Upvotes
Anton
Trendsetter/-in | Diamond Partner
Trendsetter/-in | Diamond Partner

Pillar page - navigation and responsiveness

lösung

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:

design managerdesign manager

or something like this

"html"-code"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

Anton Bujanowski Signature
0 Upvotes
wrobel
Mitglied

Pillar page - navigation and responsiveness

lösung

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

 

design_manager.png

 

and ofcourse CSS-class in right sidebar 

right_sidebar.png

 

 

 

 

 

 

 

 

 

 

 

 

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?

stylesheet_css.png

clone:

cms_clone.png

 

Have a nice day! 

wrobel

0 Upvotes
Anton
Lösung
Trendsetter/-in | Diamond Partner
Trendsetter/-in | Diamond Partner

Pillar page - navigation and responsiveness

lösung

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

check.png Did my post help answer your query? Help the Community by marking it as a solution
Anton Bujanowski Signature
wrobel
Mitglied

Pillar page - navigation and responsiveness

lösung

Anton,

 

don't worry, thanks for your advices! 🙂 

 

Have a nice day! 

0 Upvotes