Advanced CSS Selectors in Site...

User 2979665 Photo


Guest
8 posts

I know we can easily style individual tag selectors, class selectors and ID selectors in Site Designer, but is there a way to specify:

1. Compound selectors - like 'h3 > em', to automatically style all 'em' elements inside an 'h3'?

2. Pseudo-elements - like '::placeholder', or '::before'?

3. Pseudo-classes - like ':optional', or ':first-child'?

Many thanks in advance for any guidance!
User 122279 Photo


Senior Advisor
13,484 posts

On the Styles pane in SD you will find the pseudo classes. The other things you mention have not been implemented yet. We have been asking for them, though.
Ha en riktig god dag!
Inger, Norway
This site was made before we were able to create components through the app:
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/
My work in progress right now:
Components for the same as above + HTML Editor: https://mock-up.coffeecup.com


User 2979665 Photo


Guest
8 posts

Thank you for the quick feedback, @Inger!

Is it possible for us to include an external stylesheet in the project, or even add some hand-coded CSS to the `<head>` elements of all pages? That might make it possible to overcome some of those limitations - at least until they are implemented.

Apologies to ask so many questions. I downloaded a trial version of Site Designer over a month ago, opened it, had a quick look, and quit it. When work finally quieted down, I went back to have a good play with it, but was greeted with a message that my 'trial has expired'...

Site Designer looks like an awesome tool, but I'd like to make sure I can use it in my workflow before I commit.
User 122279 Photo


Senior Advisor
13,484 posts

Yes, you can add your own style sheet. Just pop it into the Resources, and then open the Pages - Manage project and reference it in the head section of your page. If you click 'Use global', it will be attached to every page.
Ha en riktig god dag!
Inger, Norway
This site was made before we were able to create components through the app:
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/
My work in progress right now:
Components for the same as above + HTML Editor: https://mock-up.coffeecup.com


User 2699991 Photo


Registered User
3,409 posts
Online Now

igor wrote:


Is it possible for us to include some hand-coded CSS to the `<head>` elements of all pages? That might make it possible to overcome some of those limitations - at least until they are implemented.
.


Not only can you do it the way Inger suggests, but yes you can insert both CSS and JS code into the header or the footer of each page, as long as you enclose them in the relevant bracket thingie (or whatever you wish to call them)
<script></script. (for JS)
<style></style> (for CSS)

The Help You Need: When You Need It The Most
Website Design & Development
Website Renovations
Wayans' Theme Park
Watch Listen & Learn Video Tutorials
https://mawarputih.id
User 2979665 Photo


Guest
8 posts

Thank you both @Inger and @Wayan! Is CSS + JS added this way (eg., directly in the head section) able to be viewed - or previewed - inside Site Designer itself, or only on an external browser?
User 2699991 Photo


Registered User
3,409 posts
Online Now

igor wrote:
Thank you both @Inger and @Wayan! Is CSS + JS added this way (eg., directly in the head section) able to be viewed - or previewed - inside Site Designer itself, or only on an external browser?

It will work on preview, on device view, and preview on

The Help You Need: When You Need It The Most
Website Design & Development
Website Renovations
Wayans' Theme Park
Watch Listen & Learn Video Tutorials
https://mawarputih.id

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.