CSS Help

[joshuaj]

Hi,

I've read over the Help Guides regarding themes and the CSS Framework (btw, thanks to the IPS team for providing that information - it's a gold mine for people like myself).

I'm in the process of trying to get my current site look/feel over to the Pages system. For the life of me, I can't seem to get the featured news div to go 100% of the page width.

I've tried to go with guides on the net https://css-tricks.com/full-browser-width-bars/ but still can't get it to work properly. Wondering if anyone could point me in the right direction here.

[steve00]

2 hours ago, joshuaj said:

Hi,

I've read over the Help Guides regarding themes and the CSS Framework (btw, thanks to the IPS team for providing that information - it's a gold mine for people like myself).

I'm in the process of trying to get my current site look/feel over to the Pages system. For the life of me, I can't seem to get the featured news div to go 100% of the page width.

I've tried to go with guides on the net https://css-tricks.com/full-browser-width-bars/ but still can't get it to work properly. Wondering if anyone could point me in the right direction here.

Without seeing the issue and not knowing what you have tried then impossible to suggest anything (e.g. maybe not going 100% due to having a sidebar)

[joshuaj]

9 hours ago, steve00 said:

Without seeing the issue and not knowing what you have tried then impossible to suggest anything (e.g. maybe not going 100% due to having a sidebar)

HI steve,

Thanks for getting back to me. I should have been more specific and I apologize for that. I wasn't sure how to explain it plus it was midnight when I wrote it.

 

https://artofwargaming.net

 

If you look at my current page, where the featured images are at the top just below the navigation. The div breaks out of the container and goes 100% page width. I'm trying to reproduce this on Pages, and I'm not having any luck. I'm creating the page with custom html and using the board wrapper. I plan on using the ipsGrid css to build my page to make it look like the current one, since it's built on a 12 grid system as well.

 

I'm actually not sure if my current page is a 100% width page with some clever css to make the content container and header a specific width and that gives the illusion that div is breaking out of the container.

[Joy Rex]

Using your browser's built in developer tools might help in discovering why the element is not achieving 100% width. In Chrome, right-click on a page element and choose Inspect, or hit F12 and bring up the Developer Tools and use the cursor to select the element - it will then show you the CSS governing that element, and you can even interactively change the values to see what the effects would be. I solve a lot of CSS issues that way.

Firefox and IE also have similar tools available to them as well.

[steve00]

Sorry do not understand

Looks like you are using similar layout design as IPS (header and footer go 100% width and middle section doesn't)

Which is same as yours

So no idea what you are trying to do

[joshuaj]

3 minutes ago, Joy Rex said:

Using your browser's built in developer tools might help in discovering why the element is not achieving 100% width. In Chrome, right-click on a page element and choose Inspect, or hit F12 and bring up the Developer Tools and use the cursor to select the element - it will then show you the CSS governing that element, and you can even interactively change the values to see what the effects would be. I solve a lot of CSS issues that way.

Firefox and IE also have similar tools available to them as well.

 

Sure, use it all the time. I'm still unable to figure it out. It's why I'm suspecting that the original page is actually 100% width with some containers that have an actual width and margin to center it. Just a hunch.

[Joy Rex]

Yeah, most likely - so either you need to position your header outside the container, or change the container CSS to suit your needs.

If you can, post a link to your work in progress, and perhaps that will help in determining what the issue might be.

[joshuaj]

4 minutes ago, steve00 said:

Looks like you are using similar layout design as IPS (header and footer go 100% width and middle section doesn't)

Yeah, that is what I'm thinking steve. I think that featured image section is actually an extension of the header which is 100% page width. I was to fixated on the ipsGrid and making it work I failed to see that the header section was 100% width on my beta site. http://beta.artofwargaming.net.

I'll go in and try to add it below that header and see what I come up with. Thanks for the set of extra eyes to help me. I'll post back with what I've got.

[joshuaj]

Ok, I managed to get that css working properly. I've coded over that featured articles area of my main site, to Pages.

Now I just gotta figure out how to use the articles system, to actually include :

1.) Link to the article

2.) Article Image

3.) Article Title

4.) Small Excerpt

 

I'm sure this above can be accomplished with that database called "Articles" and use the keys from it and include the information with the template syntax as described here: https://invisionpower.com/4guides/themes-and-customizations/template-syntax/

Then I have to figure out how to make it dynamic, al la, when new content rolls in, it will grab the first 3 images from the last 3 articles published.