Rapidcart Pro , how to change colors with css?

[jeepke (john)]

who can help to customize the looks of rapidcart with css rules?
I tried to do this through the UIkit option, however it messes up my entire Foundation layout on the website.
Is it possible to change only that particular color of a box for the entire rapidcart webshop? The css code generated by UIkit is way too big to find out which piece I need.

For example, I really just wanted to change the background color of the frames in the catalog from white to yellow so that they fit better with the website. below is a screenshot of what I mean.
Who can help me with the correct CSS code?

[teefers (Doug Bennett)]

It’s always best to provide a URL to the page when asking for help with CSS.

A screenshot doesn’t help much, other than to show precisely what you want to change.

[jeepke (john)]

https://www.tonnardkaas.nl/afhalen/index.php

[jeepke (john)]

As you can see, i mean those white boxes. I want them changed in light-yellow (ffffcc)

[teefers (Doug Bennett)]

Give this a try:

.uk-panel.uk-panel-box {
    background-color: #ffffcc;
}

[jeepke (john)]

fantastic Doug !!

That is the right one. changed it to #ffff99 and it looks better.
How did you know this, because there are so many different settings?

Can i find somewhere a manual for this?

Thanks sofar.

[teefers (Doug Bennett)]

Glad it worked for you.

@jeepke

Can i find somewhere a manual for this?

There’s tons of training available on CSS, both free and paid.

If you have a basic understanding of CSS selectors, it’s a matter of learning how to use the browser’s built-in tools.

Each browser (Chromium, webkit and Firefox) all have there own ”flavor” of developer tools.

Once you learn one of these tools, you find working with any of them similar.

I think you’ll find the Chrome Developer Tools has a lot more training available since chromium browsers are the most popular.

Just do a search on YouTube for ”learn chrome developer tools,” and you’ll find a bunch of training.

[thang (David)]

There’s also this video for the Web Inspector in Safari:

Web Inspector Walkthrough - Tech Talks - Videos - Apple Developer

[jeepke (john)]

@teefers Changed more box-colors and border colors and it looked great now!
The only minor issue i can’t find to change is when i click on “in winkelwagen” (place in cart) the upfollowing popup-box shows a grey-dimmed text in the selections sector.

What label do i need to change the fontcolor to black.
I’d just figured out the following, but the text didn’t change to black.

.uk-modal-dialog {
background-color: #fff9ce;
font-weight : 400;
color : #000000; }

Do you have any ideas? (Please use the link above and click on the “boerenkaas” button)

[teefers (Doug Bennett)]

Not sure but with a quick look (if I understand what Kodal you are talking about). It appears the text in the only modal I say is an Anchor tag.

So if you are sure on the class selector than add a new one withan anchor tag:

.uk-modal-dialog a { 
   color : #000000; 
}

[jeepke (john)]

That’s not working. I show you a screenshot of the popup lightbox i mean .

In the catalog → go to box “Boerenkaas” and click the blue button (bekijk produkten)
In the bottom the product-versions appaer → click on one green Cart-button (in winkelwagen)

After that choice you get the popup lightbox. Everything is changed to my desired colors only the grey text in the middle of the box.
Can’t figure out how to change that text-color.

[teefers (Doug Bennett)]

For some reason that is an !important argument used on some CSS in the rckit.css file. It’s set like this:

/* Fixes for Podium theme */

label {
	color: #666 !important;
}

From the comment is was added to fix one theme.

If you add this:

/* Fix for Fix  for Podium theme */

label {
	color: #000 !important;
}

That should work.

[jeepke (john)]

I don’t use the podium theme, the website is created with Foundation and custom made,
So the given css-code isn’t working yet.

The text in the middle stays light-grey (looks like a non-active part) but works fine.
I’ve changed the background color(light yellow), the header background color(orange) and can’t
find the font css used in the block.

[jeepke (john)]

changed your suggestion in the safari web-inspector and it works !! ??
Put the css-code in rapid-weaver and it stays still grey. Keep on trying now.
Hope to find the problem.

[teefers (Doug Bennett)]

Not at a Mac right now, but I made the change in the browsers and it worked for me.

If you have the field selected in chromium devTools then select the computed tab in the sidebar, you the find the color attribute and click on the CSS, it will show you what CSS rule is being applied.