How to stretch a Page Template w/o TDComposer

Posted in: Newspaper
Post count: 23

Hi,
i want to stretch a Page without using the tdComposer, is it possible?.

I am using the Plugin, https://calendarize.it, with their Template configuration i can set the Default Page for “Organizer”, so the Content is Generate by the Plugin itself.
Changes doesnt matter if i use the tdCOmposer.
So can you help me to stretch the Page with CSS?

I’m not a pro, but i take closer look and thought about i need to add these three Classes to my Page “Organzier”
tdc-row stretch_row_1400 td-stretch-content

I’Ve test it with the Chrome Developer Tool and add these Classes to this line:
<div class"td-container tdc-content-wrap">.....
and it works, but i don’t know which kind of Technique i need to use for adding this on specified Pages, is it possible?

Can you help me there?

And another Question, the Conent is strechted when i use the td Composer, but how i stretch the Header with Logo und Menue also?

Post count: 20688

Hi,

You could stretch them with CSS. I believe adding those classes will load the theme CSS just as if you used the composer, how are you adding them exactly?

Also you can maybe identify the containers that the plugin uses, stretch them. Theme stretches rows like this to full width for example
https://www.screencast.com/t/DmqeRaClGaYN

If you want these modifications per page, that would be possible only if you somehow use the unique page ID class before your code
Each page has an ID, example – https://www.screencast.com/t/yVEVtDJoe1

The header and footer elements can be stretched in the theme panel
https://www.screencast.com/t/W2Tl0Tt4i

Post count: 23

Hi Simon,
thats my Problem, how i add them without using the TDComposer.
I dont really know how to add a class to a class, correctly described?

I need to add the three Classes tdc-row stretch_row_1400 td-stretch-content
to .veranstalter, its the class of the Parent Template
https://knopfstadt.de/veranstalter/musicclub/

I don’t want it with the page id, because i want it for childpages , so i need to use the .veranstalter class and its .tdc-row, right?

How? is it possible with css or less? SO i don’t need to modify the Plugin templates?

Regards

Post count: 23

Supplement,
i have seen this also don’t work with all Archive Pages, it seems this is my Problem?
How i can set all pages to “stretch” is their a possibility?

Post count: 20688

Do you want the page to be full width? A code like this would work for that page (it will apply to that page only)
http://prntscr.com/k5x2a7

.page-id-4365 .td-main-content-wrap .td-container,
.page-id-4365 .td-main-content-wrap .tdc-row {
width: 100%;
padding-left: 24px;
padding-right: 24px;
}

Post count: 23

And how it will work for every Page?
Respectively to Build every Page width 1440px

  • This reply was modified 8 years by Leopart.
Post count: 20688

For every page and with a width of 1440px try it like this

@media (min-width: 1440px){
.td-main-content-wrap .td-container,
.td-main-content-wrap .tdc-row {
width: 1440px;
}}

Creating design with fixed widths and also keeping the website responsive is not easy. The theme uses many media queries to maintain a responsive website for all devices.
So the code I provided here will make the content 1440px only for larger screens. Give it a try and see how it works. Should apply to all the pages.

Post count: 23

Hi Simion,
nearly perfect, but after scrolling down on a page, the sidebar switch their “width” inb a smaller value. I don’t know how
https://knopfstadt.de/ursachen-fuer-fischsterben-in-sprotte-geklaert/

ps: you need a “Kudos” Function in this Forum 🙂

Regards 🙂

Post count: 20688

Add this to the code – http://prntscr.com/k6y6oj
Or better, remove it and enter it again like this

@media (min-width: 1440px){
.td-main-content-wrap .td-container,
.td-main-content-wrap .tdc-row {
width: 1440px;
}
.td-ss-main-sidebar {
width: 448px!important;
}}

Post count: 23

Perfect, thanks again ! 🙂

Viewing 10 posts - 1 through 10 (of 10 total)
The forum ‘Newspaper’ is closed to new topics and replies.