Insert a custom CSS

This section is for posting questions which are not directly related to WYSIWYG Web Builder.
Examples of off topics: web server configuration, hosting, programming related questions, third party scripts.

Note that these questions will generally not be answered by the administrators of this forum.
Post Reply
wwonderfull
 
 
Posts: 1255
Joined: Fri Aug 21, 2020 8:27 am

Re: Insert a custom CSS

Post by wwonderfull »

that´s perfect
try @crispys code and if any problem try mine after I just added the height to auto

Code: Select all

body:before, body:after{
content:"";
position:fixed;
background:#23282d;
left:0;
right:0;
height:20px;
z-index:1000;
}

body:before{top:0;}
body:after{bottom:0;}

body{
border-left:20px solid #23282d;
border-right:20px solid #23282d;
height: auto;
margin: 20px 0;
Last edited by wwonderfull on Wed Aug 03, 2022 4:39 pm, edited 1 time in total.
AlbertoMeyer
 
 
Posts: 26
Joined: Thu Mar 25, 2021 3:09 pm

Re: Insert a custom CSS

Post by AlbertoMeyer »

Thank you. I am really a newbie on this. I am in trouble in how to put this thing Up. Can you, please, send a black page wbs project) with this border to alberto.meyer@gmail.com ? I think i can learn with it.
User avatar
crispy68
 
 
Posts: 2737
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Insert a custom CSS

Post by crispy68 »

All you need to do is copy they code, open up a HTML object, paste the code and in the drop down box choose to place it between the <head> tags. that's it!
User avatar
crispy68
 
 
Posts: 2737
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Insert a custom CSS

Post by crispy68 »

@wonderfull,
body{ the height it needs to be set from 100vh to "auto".
I believe it should be 100vh. If you set it to auto and the page content is not longer/taller than your browser window, then the border will not stretch the entire browser window. It will only stretch as far as your content.
wwonderfull
 
 
Posts: 1255
Joined: Fri Aug 21, 2020 8:27 am

Re: Insert a custom CSS

Post by wwonderfull »

body{ the height it needs to be set from 100vh to "auto".
I believe it should be 100vh. If you set it to auto and the page content is not longer/taller than your browser window, then the border will not stretch the entire browser window. It will only stretch as far as your content.
@crispy I tried alot. I tried using it on my website with master frame and contents with layout grids and stuffs, as far as I tested without auto the code did not work exact for me. So I had to use auto for it to work for my webpage. But the demo I uploaded uses another method that's for sure.
Last edited by wwonderfull on Wed Aug 03, 2022 5:14 pm, edited 1 time in total.
AlbertoMeyer
 
 
Posts: 26
Joined: Thu Mar 25, 2021 3:09 pm

Re: Insert a custom CSS

Post by AlbertoMeyer »

Thank you very much. I really need to learn a lot to use this software. I didn't know it was possible to use bits of HTML outside the page to configure it. Great job. If I need someone to develop a website, I already know who to look for or recommend. cheers
Jorus
 
 
Posts: 104
Joined: Mon Jan 04, 2016 1:39 pm

Re: Insert a custom CSS

Post by Jorus »

Im trying to insert my first CSS code too, I use the HTML box and put it between the head option, but in the preview it only show text instead of a accordion menu, why is that?

body {
background: #f4f4f4;
display: flex;
}

#faq {
max-width: 700px;
margin: auto;
padding: 0 15px;
text-align: center;
}

section.faq {
padding-top: 2em;
padding-bottom: 3em;
}

#faq ul {
text-align: left;
}
.transition, p, ul li i:before, ul li i:after {
transition: all 0.3s;
}

#faq .no-select, #faq h2 {
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
user-select: none;
}

#faq h1 {
color: #000;
margin-bottom: 30px;
margin-top: 0;
}

#faq h2 {
color: #cc071e;
font-family: 'hm_light', sans-serif;
font-size: 20px;
line-height: 34px;
text-align: left;
padding: 15px 15px 0;
text-transform: none;
font-weight: 300;
letter-spacing: 1px;
display: block;
margin: 0;
cursor: pointer;
transition: .2s;
}

#faq p {
color: #333;
text-align: left;
font-family: 'hm_light', sans-serif;
font-size: 14px;
line-height: 1.45;
position: relative;
overflow: hidden;
max-height: 250px;
will-change: max-height;
contain: layout;
display: inline-block;
opacity: 1;
transform: translate(0, 0);
margin-top: 5px;
margin-bottom: 15px;
padding: 0 50px 0 15px;
transition: .3s opacity, .6s max-height;
hyphens: auto;
z-index: 2;
}

#faq ul {
list-style: none;
perspective: 900;
padding: 0;
margin: 0;
}
#faq ul li {
position: relative;
overflow: hidden;
padding: 0;
margin: 0;
/*padding-bottom: 4px;*/
/*padding-top: 18px;*/
background: #fff;
box-shadow: 0 3px 10px -2px rgba(0,0,0,0.1);
-webkit-tap-highlight-color: transparent;
}
#faq ul li + li {
margin-top: 15px;
}
#faq ul li:last-of-type {
padding-bottom: 0;
}
#faq ul li i {
position: absolute;
transform: translate(-6px, 0);
margin-top: 28px;
right: 15px;
}
#faq ul li i:before, ul li i:after {
content: "";
position: absolute;
background-color: #cc071e;
width: 3px;
height: 9px;
}
#faq ul li i:before {
transform: translate(-2px, 0) rotate(45deg);
}
#faq ul li i:after {
transform: translate(2px, 0) rotate(-45deg);
}
#faq ul li input[type=checkbox] {
position: absolute;
cursor: pointer;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0;
touch-action: manipulation;
}
#faq ul li input[type=checkbox]:checked ~ h2 {
color: #000;
}
#faq ul li input[type=checkbox]:checked ~ p {
/*margin-top: 0;*/
max-height: 0;
transition: .3s;
opacity: 0;
/*transform: translate(0, 50%);*/
}
#faq ul li input[type=checkbox]:checked ~ i:before {
transform: translate(2px, 0) rotate(45deg);
}
#faq ul li input[type=checkbox]:checked ~ i:after {
transform: translate(-2px, 0) rotate(-45deg);
}











* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

html, body {
height: 100%;
}

a,
a:visited,
a:focus,
a:active,
a:link {
text-decoration: none;
outline: 0;
}

a {
color: currentColor;
transition: .2s ease-in-out;
}

h1, h2, h3, h4 {
margin: .3em 0;
}

ul {
padding: 0;
list-style: none;
}

img {
vertical-align: middle;
height: auto;
width: 100%;
}
User avatar
crispy68
 
 
Posts: 2737
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Insert a custom CSS

Post by crispy68 »

This is only the css. There's no way for us to know why it is not working without seeing the rest of the page. Is the html correct? Is there other stuff on the page that may be conflicting with it? Are you putting all the code in the right places?
User avatar
BaconFries
 
 
Posts: 5328
Joined: Thu Aug 16, 2007 7:32 pm

Re: Insert a custom CSS

Post by BaconFries »

As crispy68 reply is this the "full" script? does it use jquery? do you have a link to the page in question so we can view the source and then we may be able to offer some help.
Jorus
 
 
Posts: 104
Joined: Mon Jan 04, 2016 1:39 pm

Re: Insert a custom CSS

Post by Jorus »

I use it on a new blank project, new blank page, new blank html box, this is the full code, and as stated I changed the parameters of the HTML box to 'between head tags'.. That's it. (I don't know anything about jquery)
User avatar
BaconFries
 
 
Posts: 5328
Joined: Thu Aug 16, 2007 7:32 pm

Re: Insert a custom CSS

Post by BaconFries »

I am sorry but it still doesn't help! The code you have provided is incomplete it is missing opening and closing tags. It should be <style> !Your code here!</style> without these it will not work this is why it is asked that you give a url or a demo project so we can try and help without this it is impossible to say why it doesn't work!
Jorus
 
 
Posts: 104
Joined: Mon Jan 04, 2016 1:39 pm

Re: Insert a custom CSS

Post by Jorus »

I didn't know the code wasn't correct, thanks for the notification. You mean this source? https://codepen.io/alvarotrigo/pen/wvpwEdL this is where I found it
User avatar
crispy68
 
 
Posts: 2737
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Insert a custom CSS

Post by crispy68 »

If you look at the source, you will see there is HTML code that needs added to the page also. You only added the CSS part. There appears to be no javascript needed.
User avatar
BaconFries
 
 
Posts: 5328
Joined: Thu Aug 16, 2007 7:32 pm

Re: Insert a custom CSS

Post by BaconFries »

this is why it is asked that you give a url or a demo project so we can try and help without this it is impossible to say why it doesn't work!
No I am referring to the url of the project or the page (html) you are making. With this said you have only provided the ccs code this was previously mentioned by crispy68. For it to work correctly you also need the full code this will include the <div></div> section that is shown in the example.
This should be inserted between the body <body>here</body>

Code: Select all

<div id="faq">
  <h1>FAQ</h1>
  <ul>
    <li>
      <input type="checkbox" checked>
      <i></i>
      <h2>Hvordan..?</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae debitis iusto voluptatum doloribus rem, qui nesciunt labore tempore fugit iste deserunt incidunt error provident repudiandae laudantium quo ipsa unde perspiciatis, nihil autem distinctio! Deserunt, aspernatur.</p>
    </li>
    <li>
      <input type="checkbox" checked>
      <i></i>
      <h2>Hvorfor..?</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente quasi, quia provident facere recusandae itaque assumenda fuga veniam dicta earum dolorem architecto facilis nisi pariatur.</p>
    </li>
    <li>
      <input type="checkbox" checked>
      <i></i>
      <h2>Hvad..?</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam quas placeat assumenda mollitia magni consequatur dolorum, quod nihil distinctio aperiam officia alias! Voluptate dolore ex officiis sit, magnam non a, eligendi pariatur aut, earum dolores tenetur ipsam id illo deleniti. Laudantium deserunt eaque ipsam voluptatum consequuntur voluptatibus sed minima ad accusamus debitis eos similique laboriosam, molestiae? Consequatur neque tempore quis. Eligendi, in ut aspernatur esse nesciunt libero.</p>
    </li>
  </ul>
</div>
Please note although you have posted in the correct section of the forum it is still understood you have some basic knowledge of how to use external code as it is outwith the help to teach you.
Post Reply