Problem applying CSS edits. URGENT please

  • 1
  • Question
  • Updated 7 years ago
  • Answered
  • (Edited)
Hello again,

i thought my problem was sorted but it didnt. i am trying to edit the width of the size of my website plus the banner but the editor doesnt work, i cleared the cache, cookies etc. no matter what i do the the editor doesnt work

div.layout {
width: 1400px;
}
#sys_banner {
width: 1400px;
height: 200px;
margin: 0 auto;
position:relative;
}

Can somebody look into it ? it is really urgent to get my website right and publish it.

Many Thanks

Panagiotis
Photo of Reducto

Reducto

  • 74 Posts
  • 0 Reply Likes
  • frustrated

Posted 7 years ago

  • 1
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
Hi Panagiotis,

For the CSS Overrides to work, you need to make sure that the "Disable CSS Overrides" tick box is not ticked

This tick box can be found in the CSS Editor, underneath where you input the CSS code.

If this tickbox is unticked, and the CSS Overrides do not work, please let me know which style you are using and I shall to correct the code for you.

Andi
Photo of Reducto

Reducto

  • 74 Posts
  • 0 Reply Likes
hello, thank for helping me out but i got another problem now, pls see the attached screenshot below. many thanks again :)
Photo of Reducto

Reducto

  • 74 Posts
  • 0 Reply Likes
but of course, you re right. silly me lol thanks so much :)
Photo of Reducto

Reducto

  • 74 Posts
  • 0 Reply Likes
the problem now is the display pls dont close that threat i ll be back :)
Photo of Reducto

Reducto

  • 74 Posts
  • 0 Reply Likes
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
Hello Panagiotis,

You will have to download the content-top, content and content-bottom images and resize them yourself. You can find the file names in the CSS, under the class names I have stated above.

You may wish to choose another style as some would not require this amount of work.

Andi
Photo of Reducto

Reducto

  • 74 Posts
  • 0 Reply Likes
thanks so much Andi, Yola has to work on it. At least at styles description should state also the limits! It states editable backgounds, editable banners but nowhere says about the limitations, i have to spend the whole night now trying allllll styles to figure out which one can do the job for me. Once again thanks Andi :)
Photo of Reducto

Reducto

  • 74 Posts
  • 0 Reply Likes
Andi, honestly i am not an expert and to download all this and work on this sounds mission impossible, is there any style you know that can allow me to wide it without restrictions as stated below ? many thanks
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
I am afraid that I am not aware of any styles that allow you to do that. If you would like, I could find a style for you but, you would have to wait for another 12 hours yet - as I am about to leave for work.

Andi
Photo of Reducto

Reducto

  • 74 Posts
  • 0 Reply Likes
Andy i have already sent an email to support but please, if you find something please let me know , i really do appreciate it
Photo of Reducto

Reducto

  • 74 Posts
  • 0 Reply Likes
thanks so much Andi, Yola has to work on it. At least at styles description should state also the limits! It states editable backgounds, editable banners but nowhere says about the limitations, i have to spend the whole night now trying allllll styles to figure out which one can do the job for me. Once again thanks Andi :)
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
Hi Panagiotis,

The following Premium Styles can easily be widened:

- Vibrant Canvas
- Palette
- Juicy Fruit

These are all new styles and could be widened without too much difficultly. Juicy fruit is my favourite of them, as it looks very modern unlike some of the other Yola styles.

If you require any assistance with the Custom CSS code, just let me know what you would like and I shall create the code for you. Using the Custom CSS Editor is very easy, when you know how!

Andi
Photo of Reducto

Reducto

  • 74 Posts
  • 0 Reply Likes
Hello Andy, thanks so much, i really appreicate it a lot. i will look into widening my website using one of these templates as suggested, but you say that i will not have a problem with the layout boarder as highlighted above ? cheers :)
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
You will not have the issues as above as the content area's are either just colors or repeatable background images - making them stretchable.
Photo of Reducto

Reducto

  • 74 Posts
  • 0 Reply Likes
thanks Andy, i ll get back here soon :)
Photo of Reducto

Reducto

  • 74 Posts
  • 0 Reply Likes
Andy as exeplained below i enclude here my code, many thanks again.

* {
margin: 0;
padding: 0;
text-decoration: none;
}

html, body {
height:100%;
}

body {
background:url(http://s2.yolacdn.net/V0022128/templa...) repeat left center transparent;
font-family: Arial, Helvetica, Helvetica, sans-serif;
font-size:12px;
color:#333;
text-align:center;
}

div#sys_background {
width:100%;
height:320px;
position:relative;
background-image: url(resources/Presentation1-2-1.jpg);
_behavior: url(http://s3.yolacdn.net/V0022128/templa...;
background-color:#000000;
background-repeat:repeat-y;
background-attachment:fixed;
background-position:top center;
}

div.page {
min-height:100%;
height:auto !important;
height:100%;
margin:0 auto -80px;
width:100%;
position:relative;
}

div.page_top {
background:url(http://s1.yolacdn.net/V0022128/templa...) repeat top left transparent;
_behavior: url(http://s3.yolacdn.net/V0022128/templa...;
width:100%;
margin:0 auto;
padding:0 0 10px;
}

div.ys_content {
margin:10px auto 0;
width:100%;
}

div#content {
min-height:150px;
width:936px;
margin:0 auto;
text-align:left;
padding:10px;
}

div.ys_banner_wrap {
background:url(http://s1.yolacdn.net/V0022128/templa...) no-repeat top center transparent;
_behavior: url(http://s3.yolacdn.net/V0022128/templa...;
width:956px;
height:346px;
margin:-310px auto 0;
padding:0;
position:relative;
z-index:10;
-webkit-box-shadow:0px 5px 20px rgba(0,0,0,0.2);
-moz-box-shadow:0px 5px 20px rgba(0,0,0,0.2);
box-shadow:0px 5px 20px rgba(0,0,0,0.2);
}

#sys_banner {
background-image: url(resources/4LiveSports%20profile.jpg.cropped946x338o-12%2C-169s960x720.jpg);
_behavior: url(http://s3.yolacdn.net/V0022128/templa...;
background-position:top center;
background-repeat:no-repeat;
height:338px;
width:946px;
margin:0 auto;
padding:0;
top:4px;
left:5px;
position:absolute;
}

div.banner_overlay_shadow {
background:url(http://s2.yolacdn.net/V0022128/templa...) no-repeat top center transparent;
_behavior: url(http://s3.yolacdn.net/V0022128/templa...;
width:956px;
height:18px;
margin:0 auto;
padding:0;
}

div.ys_header {
margin:0 auto;
width:956px;
}

div.ys_heading {
background:none;
text-align:left;
padding:5px 0 5px 0;
margin:0 auto;
}

div.ys_heading h1 {
color:#66cc00;
font-size:280%;
margin:10px 0 5px 5px;
padding:0;
font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif;
letter-spacing: -1px;
}

div.ys_heading h1 a, div.ys_heading h1 a:hover {
color:#66cc00;
padding:0;
margin:0;
text-decoration:none;
display:block;
}

div.ys_nav_wrap {
background:url(http://s3.yolacdn.net/V0022128/templa...) repeat top left transparent;
_behavior: url(http://s3.yolacdn.net/V0022128/templa...;
border:1px solid #000;
width:956px;
margin:10px auto;
overflow:hidden;
text-align:center;
}

div#menu {
float:left;
margin:0 auto;
margin-left:0;
}

div#menu ul {
list-style:none;
margin:0;
padding:0 5px 0 0;
text-align:left;
background:none;
float:left;
}

div#menu ul li {
display:inline;
float:left;
margin:0 5px 5px;
}

div#menu ul li a {
color:#fff;
display:inline-block;
margin:2px 0;
text-decoration:none;
font-size:12px;
font-weight:bold;
padding:5px 5px;
white-space:nowrap;
}

div#menu ul li a:hover {
color:#66cc00;
text-decoration:none;
}

div#menu ul li.selected a {
color:#66cc00;
text-decoration:none;
}

div.ys_nav2_wrap {
background:url(http://s3.yolacdn.net/V0022128/templa...) repeat top left transparent;
_behavior: url(http://s3.yolacdn.net/V0022128/templa...;
width:956px;
margin:10px auto;
overflow:hidden;
text-align:center;
}

div#menu2 {
float:left;
margin:0 auto;
margin-left:0;
}

div#menu2 ul {
list-style:none;
margin:0;
padding:0 5px 0 0;
text-align:left;
background:none;
float:left;
}

div#menu2 ul li {
display:inline;
float:left;
margin:2px 5px;
}

div#menu2 ul li a {
color:#fff;
display:inline-block;
margin:2px 0;
text-decoration:none;
font-size:12px;
font-weight:bold;
padding:5px 5px;
white-space:nowrap;
}

div#menu2 ul li a:hover {
color:#90E639;
text-decoration:none;
}

div#menu2 ul li.selected a {
color:#90E639;
text-decoration:none;
}

#sys_footer {
height:0;
display:none;
}

.push {
height:70px;
padding-bottom:10px;
clear:both;
}

.ys_footer {
background:url(http://s3.yolacdn.net/V0022128/templa...) repeat-x top center #000000;
_behavior: url(http://s3.yolacdn.net/V0022128/templa...;
min-height:70px;
height:auto !important;
height:100%;
overflow:hidden;
width:100%;
position:relative;
margin-top:-80px;
padding-bottom:10px;
}

.ys_footer_overlay {
background:url(http://s2.yolacdn.net/V0022128/templa...) repeat-x top center transparent;
_behavior: url(http://s3.yolacdn.net/V0022128/templa...;
overflow:hidden;
width:100%;
height:80px;
top:0;
left:0;
position:absolute;
}

div.ys_footer_shadow {
background:url(http://s1.yolacdn.net/V0022128/templa...) repeat-x top right scroll transparent;
_behavior: url(http://s3.yolacdn.net/V0022128/templa...;
width:100%;
padding-top:4px;
top:0;
left:0;
position:relative;
}

div.ys_footer div.ys_bottom_nav {
width:956px;
margin:0 auto;
background:transparent;
overflow:hidden;
font-size:10px;
font-weight:normal;
top:0;
left:0;
vertical-align:center;
}

div.ys_footer div.ys_bottom_nav ul {
float:left;
list-style:none;
margin:10px auto 0;
padding:0;
text-align:center;
width:100%;
white-space:nowrap;
}

div.ys_footer div.ys_bottom_nav ul li {
display:block;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
}

div.ys_footer div.ys_bottom_nav ul li a {
color:#fff;
display:block;
text-decoration:none;
margin:2px 0 0;
padding:0 10px;
font-weight:normal;
white-space:nowrap;
}

div.ys_footer div.ys_bottom_nav ul li a:hover {
color:#fff;
text-decoration:underline;
}

div.ys_footer div.ys_bottom_nav ul li.selected a {
color:#fff;
text-decoration:underline;
}

div.ys_footer div.ys_bottom_nav ul li span {
color:#fff;
display:block;
text-decoration:none;
text-transform:capitalize;
margin:2px 0 0;
padding:0;
font-weight:normal;
}

h1 {
font-size: 200%;
}

h2 {
font-size: 180%;
}

h3 {
font-size: 160%;
}

h4 {
font-size: 140%;
}

h5 {
font-size: 130%;
}

h6 {
font-size: 100%;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
color:#66cc00;
}

h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
color:#66cc00;
}

h1, h2, h3, h4, h5, h6 {
color:#66cc00;
margin:0;
padding:0;
}

div.ys_content a {
font-weight:bold;
color:#000;
text-decoration:none;
}

div.ys_content a:focus, div.ys_content a:hover {
color:#000;
text-decoration:underline;
}

div.ys_content a img {
border:none;
}

div.ys_content p {
margin:5px 0;
padding:2px 0 5px;
line-height:2;
}

div.ys_content p img.left {
float: left;
margin: 1.5em 1.5em 1.5em 0;
padding: 0;
}

div.ys_content p img.right {
float: right;
margin: 1.5em 0 1.5em 1.5em;
}

div.ys_content h1 img, div.ys_content h2 img, div.ys_content h3 img, div.ys_content h4 img, div.ys_content h5 img, div.ys_content h6 img {
margin: 0;
}

div.ys_content blockquote {
margin: 1.5em;
font-style: italic;
}

div.ys_content strong {
font-weight: bold;
}

div.ys_content em {
font-style: italic;
}

div.ys_content dfn {
font-style: italic;
font-weight: bold;
}

div.ys_content sup, div.ys_content sub {
line-height: 0;
}

div.ys_content address {
margin: 0 0 1.5em;
font-style: italic;
}

div.ys_content pre {
margin: 1.5em 0;
white-space: pre;
font: 1em "andale mono", "lucida console", monospace;
line-height: 1.5;
}

div.ys_content code, div.ys_content tt {
font: 1em "andale mono", "lucida console", monospace;
line-height: 1.5;
}

div.ys_content dl {
margin: 0 0 1.5em 0;
}

div.ys_content dl dt {
font-weight: bold;
}

div.ys_content dd {
margin-left: 1.5em;
}

div.ys_content .hide {
display: none;
}

div.ys_content .first {
margin-left: 0;
padding-left: 0;
}

div.ys_content .last {
margin-right: 0;
padding-right: 0;
}

div.ys_content .top {
margin-top: 0;
padding-top: 0;
}

div.ys_content .bottom {
margin-bottom: 0;
padding-bottom: 0;
}

div.ys_content ul li, div.ys_content ol li {
margin: 0 1.5em;
}

div.ys_content ul, div.ys_content ol {
margin: 0 1.5em 1.5em 1.5em;
}
Photo of Shawn Holman

Shawn Holman

  • 486 Posts
  • 26 Reply Likes
Hi Panagiotis,

The Problem with making the Yola Styles wider is that they mainly use images and that when you make it wider it only gets wider on the right side. Yola sites are actually normal size for an website. If you build you site using plain HTML then you might actually have this same problem. Let's take the Yola Homepage for Example. They have the same width as many of the Yola Styles and I think that's just how most styles are setup
Photo of Reducto

Reducto

  • 74 Posts
  • 0 Reply Likes
Hello guys, thanks for your Help. @Andy, i tried the new style for a few days now but i got stack :( could you please check the prtsc? baciscally i am trying to make my website wider to 1100px but not the banner, i added my own background which is wicked and gives a sense of 3D but when i check on the viewer/preview then the the background looks stack and the grey template appears below, could please hlep me get rid of the grey background image? i want only the background which i will upload to appear, can you please help me? I have no idea what you could possibly need so i provide you the whole code. ps i use the Juice fruit premier style and the background image i uploaded is just for the home page. i will upload other backround images on my other pages. many thanks in advance.

Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
Hi Panagiotis,

The issue with the Juicy Fruit style is that there are three sections to the background image, the top (where the menu is); the middle (which is where your image is) and the bottom (which is where the grey is).

To fix this, add the following code to the CSS Code editor:

body {
background:none;
}

This should fix the issue for you.

Andi
Photo of Reducto

Reducto

  • 74 Posts
  • 0 Reply Likes
thanks Andy, its sorted, :) am i asking too much if you help me with banner and banner wrap? i am trying to bring it level but...... :(