logo
Welcome to our new AbleCommerce forums. As a guest, you may view the information here. To post to this forum, you must have a registered account with us, either as a new user evaluating AbleCommerce or an existing user of the application. For all questions related to the older version of Gold and earlier, please go to AbleCommerce Gold forum. Please use your AbleCommerce username and password to Login. New Registrations are disabled.

Notification

Icon
Error
9.0.2 Where do I edit content page css
Options
Go to last post Go to first unread
Previous Topic Next Topic
Joe Payne2  
#1 Posted : Wednesday, September 30, 2020 7:44:05 AM(UTC)
Joe Payne2

Rank: Advanced Member

Groups: HelpDesk, Developers
Joined: 11/9/2018(UTC)
Posts: 564

Thanks: 122 times
Was thanked: 26 time(s) in 25 post(s)
We changed the website background to a snowflake pattern. But now content pages are difficult to read because of the background.

I want to create a container div that has a white background and assign it for all content pages. That way the html content of content pages is easy to read.

But I can't figure out where I would make this change in the admin Website pages. Page Layout isn't it. Page Template seems like it but I can't find a way to edit the CSS rendered. Inner templates doesn't seem like the right place.

I feel like I'm missing something simple. Any suggestions?

I'd upload an attachment but that's not working in this forum software right now for me.
Back to top

Wanna join the discussion?! Login to your AbleCommerce Forums forum account. New Registrations are disabled.
Back to top  
ray22901031  
#2 Posted : Wednesday, September 30, 2020 8:29:40 AM(UTC)
ray22901031

Rank: Advanced Member

Groups: Authorized User, Developers
Joined: 2/17/2019(UTC)
Posts: 909

Thanks: 3 times
Was thanked: 15 time(s) in 15 post(s)
Hello Joe,

There are probably two ways that you can accomplish this, the first way which I have already verified that's working is to go to the contact page and under the HTML Head section you can insert something like this.

<style>
html, body, #page-wrapper {
background-image: none !important;
background-color: red !important;
<!-- background-image: linear-gradient(90deg, #f6f6f6 0%, #bdbdbd 91%) !important; -->
}

</style>

The second way is to create a theme specifically for contact pages and under the basic tab setting use the drop-down to verify your theme there. I have not verified this, but there's no reason for it not to work, this way you can change the background to all pages in one scoop.

I hope you find this information useful,
-Ray

Edited by user Wednesday, September 30, 2020 10:38:28 AM(UTC)  | Reason: Not specified
Back to top
ray22901031  
#3 Posted : Wednesday, September 30, 2020 8:42:17 AM(UTC)
ray22901031

Rank: Advanced Member

Groups: Authorized User, Developers
Joined: 2/17/2019(UTC)
Posts: 909

Thanks: 3 times
Was thanked: 15 time(s) in 15 post(s)
Another way that might be a little bit easier than creating a new theme would be to create a css class and reference that class in the HTML segment. I have not tried this, but if you use the !important tag and the fact that the new settings are closer to the code, it should override the default theme.

I have not tried this but there would be no indication why this would not function, especially since the straight in-line style functions and works .

-Ray

Edited by user Wednesday, September 30, 2020 8:43:45 AM(UTC)  | Reason: Not specified
Back to top
shari  
#4 Posted : Wednesday, September 30, 2020 12:38:00 PM(UTC)
shaharyar

Rank: Advanced Member

Groups: Admin, Developers, Registered, HelpDesk, Authorized User
Joined: 10/5/2018(UTC)
Posts: 704

Thanks: 5 times
Was thanked: 113 time(s) in 112 post(s)
To make this change for all content pages you need to edit the layout used by a page template for content pages.
You need to make sure that the layout is only being used for a page template used for content pages and is not a shared layout.

Note: In our sample data, the layout is No Sidebars but this layout is being used for both Content pages and Checkout pages page templates.

Please follow the steps:

- Go to Admin => Website => Store Design => Page Layouts. Create a copy of 'No sidebars' layout
- When created, edit the layout and from design tab edit the source code and add a container div around the whole HTML content and save.
- Now you can add inline styles to that container div or use CSS ID or a CLASS.
- Go to Admin => Website => Store Design => Page Templates. Edit 'Content Pages' page template. This page template is store default for all content pages.
- From Basic Tab, change the page layout and select the new page layout created and click Save before changing the tabs.
- Now from Design Tab, again drag and drop header and footer boards. This is needed because we are now using a new empty layout.
- Now preview the content page and it should reflect the styles.

I hope this helps. Goodluck!
Back to top
thanks 1 user thanked shaharyar for this useful post.
Joe Payne2 on 10/1/2020(UTC)
Joe Payne2  
#5 Posted : Thursday, October 1, 2020 6:16:21 AM(UTC)
Joe Payne2

Rank: Advanced Member

Groups: HelpDesk, Developers
Joined: 11/9/2018(UTC)
Posts: 564

Thanks: 122 times
Was thanked: 26 time(s) in 25 post(s)
Fantastic help, thank you so much for the step-by-step. That worked exactly as I needed.

The only issue remaining is the body content is extending outside of the box. But I'm not sure why. Here's what I did. Instead of adding a parent div container I just added a style to the existing div container around the body section. Did that mess it up?

Code:

<div class="container container-no-padding" style="background: white">   
<div class="row content">
    <div class="column col-md-12 main-content col-xs-12 col-sm-12">
    <!--CONTENT-ZONE--><div>@RenderBody()</div><!--/CONTENT-ZONE--></div>
</div>
</div>
Back to top
shari  
#6 Posted : Thursday, October 1, 2020 6:25:42 AM(UTC)
shaharyar

Rank: Advanced Member

Groups: Admin, Developers, Registered, HelpDesk, Authorized User
Joined: 10/5/2018(UTC)
Posts: 704

Thanks: 5 times
Was thanked: 113 time(s) in 112 post(s)
You did the right thing. This also resolved the issue of body content extending out of the box.

Thanks
Back to top
Joe Payne2  
#7 Posted : Thursday, October 1, 2020 6:37:31 AM(UTC)
Joe Payne2

Rank: Advanced Member

Groups: HelpDesk, Developers
Joined: 11/9/2018(UTC)
Posts: 564

Thanks: 122 times
Was thanked: 26 time(s) in 25 post(s)
No you misunderstand. I still have the issue with body content extending outside the box.
Back to top
Joe Payne2  
#8 Posted : Thursday, October 1, 2020 6:41:10 AM(UTC)
Joe Payne2

Rank: Advanced Member

Groups: HelpDesk, Developers
Joined: 11/9/2018(UTC)
Posts: 564

Thanks: 122 times
Was thanked: 26 time(s) in 25 post(s)
Back to top
ray22901031  
#9 Posted : Thursday, October 1, 2020 6:54:21 AM(UTC)
ray22901031

Rank: Advanced Member

Groups: Authorized User, Developers
Joined: 2/17/2019(UTC)
Posts: 909

Thanks: 3 times
Was thanked: 15 time(s) in 15 post(s)
Joe,

Change your width to 100%, please see the picture.

Image1.jpg (1,664kb) downloaded 9 time(s).
Back to top
thanks 1 user thanked ray22901031 for this useful post.
Joe Payne2 on 10/1/2020(UTC)
shari  
#10 Posted : Thursday, October 1, 2020 7:20:57 AM(UTC)
shaharyar

Rank: Advanced Member

Groups: Admin, Developers, Registered, HelpDesk, Authorized User
Joined: 10/5/2018(UTC)
Posts: 704

Thanks: 5 times
Was thanked: 113 time(s) in 112 post(s)
The issue I was referring to was a horizontal scroll that was occurring because of the div container that was around the whole HTML.

Your issue is correctly identified by Ray. I was about to post the same.
Back to top
Joe Payne2  
#11 Posted : Thursday, October 1, 2020 7:30:04 AM(UTC)
Joe Payne2

Rank: Advanced Member

Groups: HelpDesk, Developers
Joined: 11/9/2018(UTC)
Posts: 564

Thanks: 122 times
Was thanked: 26 time(s) in 25 post(s)
Ok where is that table tag? It's not in the page layout I'm editing so I don't know where to make the change?
Back to top
shari  
#12 Posted : Thursday, October 1, 2020 7:31:15 AM(UTC)
shaharyar

Rank: Advanced Member

Groups: Admin, Developers, Registered, HelpDesk, Authorized User
Joined: 10/5/2018(UTC)
Posts: 704

Thanks: 5 times
Was thanked: 113 time(s) in 112 post(s)
It will be in the content of a webpage. Edit the webpage and see the HTML in the code view.
Back to top
thanks 1 user thanked shaharyar for this useful post.
Joe Payne2 on 10/1/2020(UTC)
Joe Payne2  
#13 Posted : Thursday, October 1, 2020 7:37:19 AM(UTC)
Joe Payne2

Rank: Advanced Member

Groups: HelpDesk, Developers
Joined: 11/9/2018(UTC)
Posts: 564

Thanks: 122 times
Was thanked: 26 time(s) in 25 post(s)
Thank you both. I found it.

I so hate CSS.
Back to top
Users browsing this topic
Guest (5)
Forum Jump  
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.

Privacy Policy | Powered by YAF.NET 2.2.4.14 | YAF.NET © 2003-2024, Yet Another Forum.NET
This page was generated in 0.318 seconds.