Bottom section background color

[ftlx]

Hi C-Lodder

Im trying to change background color of the bottom section (Bottom A/B). But without luck.

Is that a defined section or can it be changed, like the background color of the footer

See photo as example.

Please advise

FTLX

[M4dKiwi]

Hi , I hope you dont mind my suggestion

but I had succesfully changed my Header & Footer colours to match, I've used a gradient in mine however this template has great features like being able to use High IQ CSS & make your own user CSS taking advantage of setting your header & or footer to var(--hiq-colour-grey-1) then you can set up the colour grey 1 css on your template editing on the backend ,which makes it easy to change what I have done & I suggest is that you save a class id on user.css like

#background { background: var(--hiq-colour-grey-1) } save to user.css then open up the Template index.php and in the Div class = "grid-child container-top-a" for example ,you add the id so you get

and save , or whichever div ID and which ever custom colour you want (grey scale for example)

it works for me :) except mine are just matching for the footer & header (as I mentioned they are in a gradient)

only disadvantage but not a big deal is its best to memorise this or save a copy offsite to cut & paste as nautrally this template evolves & updates with more great features, the code entered into the Index file will be replaced ,but its only a line or two of code (to put back in or cut & paste from your offsite txt file) , your user.css file will be fine as will your custom css settings

[ftlx]

Hi M4dKiwi

Thanks for your reply and input. I agree its a great template :-)

I will try your suggestion. However just to be sure about my query.

I am able change color of the footer, but what I am trying is to change the background of the Bottom A/B modules.

Im trying to have design like below image, where footer is one color (black) and Bottom B modules have another color (grey).

Thanks FTLX

[M4dKiwi]

This is an example of how (where I added the ID) I did it, it will be slightly differnt to you but its an example (the id class tag will work in any div area) (both above =template index.php - add css ID tag) so I made my header & footer div areas share the same gradient (for now) this is the type of code you will need to update (template index.php) every version update , but below on your user.css file wont change one you save your ID tag into the user.css tag - Eg (image = user.css file) my id background gradient tag id is more complicated than you need, but this is what works for me & how I did it , you'll only need one line for your single background colour + you'll need to customise it to suit your needs

[M4dKiwi]

add the id tag into here , replace

with ID insert (say with 'bg' as an example)

then set your css tag ID

#bg { background: var(--hiq-color-grey-1) }

into your user.css & then Bob should be your uncle

[ftlx]

Thanks I will try. Im not a css shark though :-)

PS: Will it change the color of the whole template area of the "bottom" or perhaps just the color of the bottom B containers?

[M4dKiwi]

all good

it should only affect the div are you insert the ID tag to (usually before the class tag & insuring it still is enclosed with its closing '>' bracket still , in your case you want to insert it into the following .... (index.php)

or

change them to

• *

  or <div ID='bg' class="grid-child container-bottom-b">

  for instance , the ccs styling is the best part (its simple even for learners like myself, dont forget to create a user.css file into the css folder which is where you can add styling changes

  • its another great feature :)

  On Thu, 4 Nov 2021 at 04:33, ftlx @.***> wrote:

  Thanks I will try. Im not a css shark though :-)

  PS: Will it change the color of the whole template area of the "bottom" or perhaps just the color of the bottom B containers?

  — You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/C-Lodder/lightning/issues/251#issuecomment-959462938, or unsubscribe https://github.com/notifications/unsubscribe-auth/AFOO43HC6XVPYVJN5BFISG3UKFI37ANCNFSM5HIZNJ2Q . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

[M4dKiwi]

Soooo.... do you wanna close this now?

[C-Lodder]

I'll leave it open for a couple of days as it's given me an idea.

[ftlx]

Hi MD4kiwi

I did the changes and it is working well :-) however i had to add ...full-width.. to have the black color edge to edge, if not it will be only on the module background which will be black.

Now I have an issue with the text color,, which is black in template... any idea how I can change the text color to white inside the Bottom B module only.

See image where the text is marked

Thanks FTLX

[M4dKiwi]

good to hear, Its often a matter of experimentaition, (remember to have a copy ,should things go weird so you can undo. easiest way is using WYSIWG settings (using tinyMCE joomla extention) can be hard to see with normal backend light template backgrounds but switch to code to see it. The author of this great lighting template has an awesome dark backend template which I use, you can also change the orignal backend template colors. there are probably many other (slighty more complex) ways of acheiving your desired results by using custom CSS rules in your user.css ,you could set it into say your < H 6 > tags but you might want larger headline text too, maybe using an id tag again & use < span id="white"> in your content ,but WYSIWG is probally easier. *H6 spaces inserted only for formatting for this reply

[ftlx]

Sure and thanks for guidance, Im doing progress slowly :-)

I agree it as a great template and not with too much complicated makeup like many other templates on the web.

PS: If dont mind, where can I see your site, just to have some inspiration and see the posibillities.

Regards FTLX

[M4dKiwi]

so far my site is a work in progress & so currently it's hosted localy on an apache server (not exactly online yet), but I can give you a few tips & links that I have found useful, Tip # 1 definitely take advatage of using the high iq css in your (Tip#1.1) user.css for example using the ' var(--hiq-presets) ' as it makes it easy if you want to make colour theme changes easy via the template custom css options - I like they grey scale 1-6 as it was convenient to set up my gradient & easy to change.

as mentioned my header & footer share the gradient but header starts at --> background:--hiq-header-background and my footer starts at --> background:--hiq-footer-background I have a basic css dropdown menu which also uses a gradient (also starting with -> background:--hiq-dropdown-color) (so again use hiq css whenever you can ) my menu text looks great with a shadow (using var:--hiq-text-outline for colour - my hiq may not be correct ,but Im sure you'll know what Im referring to)

https://code.tutsplus.com/tutorials/how-to-build-a-kick-butt-css3-mega-drop-down-menu--net-15129 gave me some good insight

another tip to help with your custom css styling, (for now) I've found it handy to have an article to test your typography , so make the title typography or test, you could make this visible to admin level only, I cant find where I got this (via https://jonathanharrell.github.io/hiq/ ) so for you I have put the article I pulled (& extra) onto a pastebin file (called "kitchen sink") --> https://pastebin.com/5MQkVUb5 cut & paste into your article page, this is where you can add extra to experiment (I have found this very helpfull) it may not look like much but when its displayed in your joomla sites frontend then the css styling changes you make will show up!

dont forget you can use fontawsome with this template

I will also give you some handy links I use even if for inspiration

https://github.com/you-dont-need/You-Dont-Need-JavaScript 25 great CCS tricks

https://www.codesdope.com/blog/article/12-creative-css-and-javascript-text-typing-animati/

https://www.webdesigndev.com/free-javascript-effects-for-web-designers/ (20 tips)

also code pen has lots of awsome code techniques https://codepen.io/ dont forget to bookmark these & put them in same folder ! there are many more, but Im sure you"ll find them & we all have diff tastes :)

so far Im having to add my javascript code into the header menus .js file but its not ideal, hopefully future updates will allow a custom user.js so updates dont clear the custom js code each time (remeber to keep copys of custom javascript if you use my risky method :)

[ftlx]

Super and thanks for the tips and links. Its really appreciated.

PS: I did some basic programming in Uni. in something Turbo Pascal, thats a few years ago and things have changed slightly since than.

Take care and stay strong :-)

[M4dKiwi]

I was Reading (& watching this great video) on https://css-tricks.com/ (another good site to bookmark) and I found it an interesting take on todays popular website building techneques & was thinking you & C-lodder may find this intersting too,

https://css-tricks.com/have-single-page-apps-ruined-the-web-transitional-apps/

( I have experience in (a little of) so many diff programing languages (almost every acronym program language out there) but I'm still learning more everyday - I'd love to learn more about php & yaml programing (sadly more advanced than I can grasp but I envy this templates authours level of ability & am so pleased at C-lodders commitment to make this template so user freindly :) - ahh well , we all gotta start somewhere )

[ftlx]

Im in full css mode at the moment :-)

Thanks for the link and all the best with learning.