XF 2.1 Padding on a created page question

[crazykgb]

After creating a "page" through the node control, I have this "no padding" between "Share:" and the edge. Killed a few hours looking for where I need to go to add some padding parameters. Any help?



Disregard. Solved.

 

[Jordyn]

Just to help others out, the answer would be adding this code to your pages Template HTML.

<xf:css>
.shareButtons {
    margin-left: 120px;
}
@media (max-width: 800px)
{
.shareButtons {
    margin-left: 5px;
}
}
</xf:css>

Just mess with the PX

 

[Brad Padgett]

or you can take the same code and add it to the template "extra.less" which is where all the additional css for your site is supposed to go. The templates used to apply any extra css to your site. You simply inspect element on firefox or chrome and then find the css class and use css in extra.less

 

[Jordyn]

or you can take the same code and add it to the template "extra.less" which is where all the additional css for your site is supposed to go.

Not really, adding that code to extra.less would effect share icons below threads, posts, gallery etc. Doing it in pages Template HTML effects only that actually page.

 

[Brad Padgett]

Not really, adding that code to extra.less would effect share icons below threads, posts, gallery etc. Doing it in pages Template HTML effects only that actually page.

Well true. But not entirely. You could always use the data template method and simply add in the data template for the page. In the html on inspect element there's an area up top.

It would look something like this.

[data-template="forum_list"] .shareButtons {
margin-left:120px;
}

Except you'd be replacing forum_list with the correct template name of the page node. This area is up top under inspect element where the html tag is. A lot of people don't know this. I used this quite a bit on my style for my site when targeting specific pages and comes in handy quite a bit.

 

[Jordyn]

Yes im aware of that, i just didn't have the actually answer to put in extra.less at the time.
I probably like to add in pages HTML due to added widgets.
Cheers.

All pages:

[data-template="page_view"] .shareButtons {
    margin-left:120px;
}
@media (max-width: 800px)
{
.shareButtons {
    margin-left:5px;
}
}

Single page ID

[data-container-key="node-ID"] .shareButtons {
    margin-left:120px;
}
@media (max-width: 800px)
{
.shareButtons {
    margin-left:5px;
}
}