I am grateful if any one could assist me to create the below:
https://foundation.zurb.com/building-bl … lines.html
I am having problem understanding CSS section.
Thanks
https://foundation.zurb.com/building-bl … lines.html
I am having problem understanding CSS section.
Thanks
I have a menu in my sharing folder (see signature) which is not exaxtly the same, but similar. You could take a look at it and see if you can change it. It's the 'Hover-underlined' in the rightmost column. Any css with things like ::after, ::before will have to be added in the settings, as the programme is not yet capable of doing it.
Ha en riktig god dag!
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Inger wrote:
I have a menu in my sharing folder (see signature) which is not exaxtly the same, but similar. You could take a look at it and see if you can change it. It's the 'Hover-underlined' in the rightmost column. Any css with things like ::after, ::before will have to be added in the settings, as the programme is not yet capable of doing it.
I have a menu in my sharing folder (see signature) which is not exaxtly the same, but similar. You could take a look at it and see if you can change it. It's the 'Hover-underlined' in the rightmost column. Any css with things like ::after, ::before will have to be added in the settings, as the programme is not yet capable of doing it.
Thanks for your help.
The effect can be done by adding a <span> (text element) above and below the text link element. Set the background of the <spans> and then delete all the text so you have a colored block basically. Set your height and length of the block.
You will then need to create a "dynamic class" on the span elements so you can set the after state. Once you have that created, the only way to animate multiple objects on hover (in this case it will be the container holding the spans and text link) is to use jquery to add the dynamic class when hovering and remove when not.
Keep in mind this general approach or effect will not work on mobile as there is no hover.
You will then need to create a "dynamic class" on the span elements so you can set the after state. Once you have that created, the only way to animate multiple objects on hover (in this case it will be the container holding the spans and text link) is to use jquery to add the dynamic class when hovering and remove when not.
Keep in mind this general approach or effect will not work on mobile as there is no hover.
Bootstrap 5 CSS Grid.
Kishore Bhagwan wrote:
I am grateful if any one could assist me to create the below:
https://foundation.zurb.com/building-bl … lines.html
I am having problem understanding CSS section.
Thanks
I am grateful if any one could assist me to create the below:
https://foundation.zurb.com/building-bl … lines.html
I am having problem understanding CSS section.
Thanks
How about like this
https://test.rsdtutorials.com
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?
LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?
LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
forgot to mention
The first 2 links (about & blog)work to those pages to show the active state & hover effect
The link to menu2 (different clour & different font) works, but only the link to take you back to menu1 in that menu.
It was done by creating a custom css file with the css from FF menu in Zurb- inserting that into the resources,, pointing to the custom css file in the header.
naming the ul & the list items to the class name in the custom css
Done
no messing with :before or :after
changing the colour/font just requires editing the custom css for the background colour & inserting a new font family
The first 2 links (about & blog)work to those pages to show the active state & hover effect
The link to menu2 (different clour & different font) works, but only the link to take you back to menu1 in that menu.
It was done by creating a custom css file with the css from FF menu in Zurb- inserting that into the resources,, pointing to the custom css file in the header.
naming the ul & the list items to the class name in the custom css
Done
no messing with :before or :after
changing the colour/font just requires editing the custom css for the background colour & inserting a new font family
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?
LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?
LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
Wayan Jaya wrote:
forgot to mention
The first 2 links (about & blog)work to those pages to show the active state & hover effect
The link to menu2 (different clour & different font) works, but only the link to take you back to menu1 in that menu.
It was done by creating a custom css file with the css from FF menu in Zurb- inserting that into the resources,, pointing to the custom css file in the header.
naming the ul & the list items to the class name in the custom css
Done
no messing with :before or :after
changing the colour/font just requires editing the custom css for the background colour & inserting a new font family
forgot to mention
The first 2 links (about & blog)work to those pages to show the active state & hover effect
The link to menu2 (different clour & different font) works, but only the link to take you back to menu1 in that menu.
It was done by creating a custom css file with the css from FF menu in Zurb- inserting that into the resources,, pointing to the custom css file in the header.
naming the ul & the list items to the class name in the custom css
Done
no messing with :before or :after
changing the colour/font just requires editing the custom css for the background colour & inserting a new font family
I would be grateful if you could arrange for me to download the sample file.
Thank You.
Kishore Bhagwan wrote:
I would be grateful if you could arrange for me to download the sample file.
Thank You.
I would be grateful if you could arrange for me to download the sample file.
Thank You.
https://www.dropbox.com/s/gn7wnihost1n1 … t.rsd?dl=0
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?
LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?
LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
Wayan Jaya wrote:
https://www.dropbox.com/s/gn7wnihost1n1 … t.rsd?dl=0
Kishore Bhagwan wrote:
I would be grateful if you could arrange for me to download the sample file.
Thank You.
I would be grateful if you could arrange for me to download the sample file.
Thank You.
https://www.dropbox.com/s/gn7wnihost1n1 … t.rsd?dl=0
Hi
I am having difficult in under standing
"It was done by creating a custom css file with the css from FF menu in Zurb- inserting that into the resources,, pointing to the custom css file in the header.
naming the ul & the list items to the class name in the custom css "
Please direct me, so I will be able to do it step by step. Do I have download from Zurb???, What is FF menu???
This first time I am doing it.
Kishore Bhagwan wrote:
Hi
I am having difficult in under standing
"It was done by creating a custom css file with the css from FF menu in Zurb- inserting that into the resources,, pointing to the custom css file in the header.
naming the ul & the list items to the class name in the custom css "
Please direct me, so I will be able to do it step by step. Do I have download from Zurb???, What is FF menu???
This first time I am doing it.
Wayan Jaya wrote:
https://www.dropbox.com/s/gn7wnihost1n1 … t.rsd?dl=0
Kishore Bhagwan wrote:
I would be grateful if you could arrange for me to download the sample file.
Thank You.
I would be grateful if you could arrange for me to download the sample file.
Thank You.
https://www.dropbox.com/s/gn7wnihost1n1 … t.rsd?dl=0
Hi
I am having difficult in under standing
"It was done by creating a custom css file with the css from FF menu in Zurb- inserting that into the resources,, pointing to the custom css file in the header.
naming the ul & the list items to the class name in the custom css "
Please direct me, so I will be able to do it step by step. Do I have download from Zurb???, What is FF menu???
This first time I am doing it.
follow the link
https://www.dropbox.com/s/gn7wnihost1n1zl/menu-hover-effect.rsd?dl=0
download the file from there
or I can show you step by step with a video
FF menu is the one you saw in Foundation Zurb site building blocks
[/quote]
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?
LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?
LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.