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
AlbertoMeyer
 
 
Posts: 26
Joined: Thu Mar 25, 2021 3:09 pm

Insert a custom CSS

Post by AlbertoMeyer »

HI, i need to insert this custom CSS on my page (i know that in between head tags) but it is not working. It is for put a border in the browser window.
Can you help?

Code: Select all

<style>
* {margin: 0; padding: 0;}
body { padding: 0  px; position: relative; }
#sidebar {
	width: 370px;
	position: fixed;
	top: 30px;
	left: 0px;
	height: 100%;
	text-align: center;
}

#content {
	padding: 0 0 0 240px;
}

.border-box {
  border: 15px solid blue;
  position: fixed;
  pointer-events: none;
  bottom: 0px;
  left: 0px;
  top: 0px;
  width: 100%;
}

</style>
User avatar
Pablo
 
Posts: 21577
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Insert a custom CSS

Post by Pablo »

You can add CSS in Page HTML -> Between head tags.
However, your code is not complete so it will not have any effect unless you add the rest of the code.

Note that we cannot teach you how to write your own code.
When you use custom code, it is assumed that you know what you are doing.
The code will be inserted "AS IS", so if it does not work then either the code is incorrect, incomplete or it conflicts with other code on the page.
AlbertoMeyer
 
 
Posts: 26
Joined: Thu Mar 25, 2021 3:09 pm

Re: Insert a custom CSS

Post by AlbertoMeyer »

I understand your point of view and thank you for your attention. I've been using this program for over 10 years and I've never really used it. I'm trying to make a website. I'm a Delphi programmer, I don't understand CSS, etc, etc. I was hoping to find some solution. Thanks anyway
User avatar
BaconFries
 
 
Posts: 5328
Joined: Thu Aug 16, 2007 7:32 pm

Re: Insert a custom CSS

Post by BaconFries »

Will move to "Off Topic Section" for future reference and possible help/solutions from other members/users.
wwonderfull
 
 
Posts: 1255
Joined: Fri Aug 21, 2020 8:27 am

Re: Insert a custom CSS

Post by wwonderfull »

@AlbertoMeyer Although we could be able to help but I was wondering if you can share your project and then we can see what kind of css you are trying to add custom. If you have problem sharing the project public then you can contact us on our website we can talk there more elaborately.
User avatar
Pablo
 
Posts: 21577
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Insert a custom CSS

Post by Pablo »

I was hoping to find some solution.
The solution is to insert valid code. The code you have will not do anything because it assumes a specific HTML structure. So, you will also have to add these elements to the page.
This is unrelated to the software.
AlbertoMeyer
 
 
Posts: 26
Joined: Thu Mar 25, 2021 3:09 pm

Re: Insert a custom CSS

Post by AlbertoMeyer »

As I said, I understand your point of view. Of course, I'm also a developer. In my case, I try to help my clients, trying to solve any doubts, even if they are not related to my programs (I do software in the medical field). But, as I said, this is a personal policy for each company. I'm just trying to put a border on my site as can be seen here: https://www.alphaskins.com/forum/

I often use **** Web Designer, which really makes my life easier. I've been trying to switch to your software for at least 5 years, although my first purchase was long before that, I think, but I try to make updates to help even though I don't need to. I would like to use your software's CMS options as well. But there are many things to learn, to become familiar with. My time is quite limited for this. But thanks for the feedback.
AlbertoMeyer
 
 
Posts: 26
Joined: Thu Mar 25, 2021 3:09 pm

Re: Insert a custom CSS

Post by AlbertoMeyer »

wwonderfull wrote: Wed Aug 03, 2022 3:51 am @AlbertoMeyer Although we could be able to help but I was wondering if you can share your project and then we can see what kind of css you are trying to add custom. If you have problem sharing the project public then you can contact us on our website we can talk there more elaborately.
I don´t have a project yet. Just a blank page with i try to add a border like

https://www.alphaskins.com/forum/

I reserach a little and found the css above, but i can´t integrate on wysiwyg web builder.
User avatar
BaconFries
 
 
Posts: 5328
Joined: Thu Aug 16, 2007 7:32 pm

Re: Insert a custom CSS

Post by BaconFries »

As already mentioned the css styling you have provided is incomplete or is just part of what is required of the source code to give you the desired look. Other html elements are needed so it just isn't a matter of inserting the code and it will work.
User avatar
Pablo
 
Posts: 21577
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Insert a custom CSS

Post by Pablo »

To add a border, you can use this code.

Code: Select all

<style>
html
{
  height: 100%;
}
body
{
   border: 15px solid blue;
   height: 100%;
}
</style>
Or any code that works in another web design tool...
AlbertoMeyer
 
 
Posts: 26
Joined: Thu Mar 25, 2021 3:09 pm

Re: Insert a custom CSS

Post by AlbertoMeyer »

Thank you very much, Pablo. It´s 99% that I want. I want a fixed border, but now i can learn how to do that, becuase i know the way on yout software. Thanks a lot
wwonderfull
 
 
Posts: 1255
Joined: Fri Aug 21, 2020 8:27 am

Re: Insert a custom CSS

Post by wwonderfull »

AlbertoMeyer wrote: Wed Aug 03, 2022 3:37 pm Thank you very much, Pablo. It´s 99% that I want. I want a fixed border, but now i can learn how to do that, becuase i know the way on yout software. Thanks a lot
let me make it a 100% for you :D check this out https://needsimplewebsite.com/demoborder
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 »

You could try something like this:

Code: Select all

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

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

body{
border-left:20px solid #000000;
border-right:20px solid #000000;
height:100vh;
margin: 20px 0;
</style>
I used body pseudo elements because you need for the border to be above the content below. It also allows you to fix the position of the top and bottom border. I also added margin on top and bottom to account for the border.
wwonderfull
 
 
Posts: 1255
Joined: Fri Aug 21, 2020 8:27 am

Re: Insert a custom CSS

Post by wwonderfull »

crispy68 wrote: Wed Aug 03, 2022 4:07 pm You could try something like this:

Code: Select all

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

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

body{
border-left:20px solid #000000;
border-right:20px solid #000000;
height:100vh;
margin: 20px 0;
I used body pseudo elements because you need for the border to be above the content below. It also allows you to fix the position of the top and bottom border. I also added margin on top and bottom to account for the border.
The pseudo element works also crispy but one thing needs to get changed and that is in body{ the height it needs to be set from 100vh to "auto". That is how it worked for my responsive webdesign pages.
AlbertoMeyer
 
 
Posts: 26
Joined: Thu Mar 25, 2021 3:09 pm

Re: Insert a custom CSS

Post by AlbertoMeyer »

wwonderfull wrote: Wed Aug 03, 2022 3:53 pm
AlbertoMeyer wrote: Wed Aug 03, 2022 3:37 pm Thank you very much, Pablo. It´s 99% that I want. I want a fixed border, but now i can learn how to do that, becuase i know the way on yout software. Thanks a lot
let me make it a 100% for you :D check this out https://needsimplewebsite.com/demoborder
that´s perfect
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