Help With Custom Ccs And Visual Editor Overwrite

Store Builder Questions
21

Yes, the OP needs to learn how to use code inspector and determine what the right qualification should be for the affect he wants to create.

Would suggest an online tutorial on css.

22

That would be me and you can say that again… I am a business owner who specialized in ink distribution and chip coding. That said, I have developed my entire website without any help, and haven’t even had a developer take a look at it yet. Prior to 6 months ago when I decided to start teaching myself a few different code syntax’s I had no experience other than HTML, so I am taking all of your advise in and appreciate it.


The only thing I don’t understand is that to simplify things I’ve made a class just like a default one, and applied it to the same block that the default class is used for, so although I lack experience, it seems as if the only difference is where the code resides [ie. This new CSS Class .about-co-subheader is in the styles.css file created for the My Changes add-on technique of adding new CSS code].


The reason my confusion stands is because I can correctly apply this CSS code in html blocks with code similar to

text here

but can not figu’re out how to apply it through the user-defines CSS class field in the block settings in layout manager.


I’ll leave it at that, if anyone knows the solution or has experienced this dilemma and understands what I am doing wrong your advise would be greatly appreciated; I have already picked your brains enough though.


Again, thanks to all who have contributed. It’s been of great help.

23

That would be me and you can say that again.. I am a business owner who specialized in ink distribution and chip coding. That said, I have developed my entire website without any help, and haven't even had a developer take a look at it yet. Prior to 6 months ago when I decided to start teaching myself a few different code syntax's I had no experience other than HTML, so I am taking all of your advise in and appreciate it.

The only thing I don't understand is that to simplify things I've made a class just like a default one, and applied it to the same block that the default class is used for, so although I lack experience, it seems as if the only difference is where the code resides [ie. This new CSS Class .about-co-subheader is in the styles.css file created for the My Changes add-on technique of adding new CSS code].

The reason my confusion stands is because I can correctly apply this CSS code in html blocks with code similar to

text here

but can not figu're out how to apply it through the user-defines CSS class field in the block settings in layout manager.

I'll leave it at that, if anyone knows the solution or has experienced this dilemma and understands what I am doing wrong your advise would be greatly appreciated; I have already picked your brains enough though.

Again, thanks to all who have contributed. It's been of great help.

What would be really helpful is if you were to post a link to the site and an image to show the part you want to change. Someone might be able to look at it in code inspector and tell you what you are doing wrong.

Alan

24

I wanted to check back in and let everyone know that I found the resolution and since this thread has so many views and thus there are probably a lot of people with the same questions…

  1. Follow the tutorial referenced at beginning of thread on how to set up the My Changes add-on for editing/adding CSS code [I used styles.css - make sure you use .css extension for both this file and also when it is referenced in the .tpl file].

  2. Add code similar to this in the styles.css file you created in /css/addons/my_changes/ [important: keep the “div.” and the " p {" part of the class name, everything else can be changed]:


    div.about-co-subheader p {

    border-width: 12px

    border-style: solid

    border-color: #18191A

    }

  3. Go to Layout Manager. Find the desired grid you want to apply your code to, and open the settings panel for that grid.

  4. In the ‘User-Defined CSS Class’ field add: about-co-subheader [if you want to apply two or more CSS classes, put a space in between each class]

  5. Administration > Storage > Clear Cache

  6. Check results


    Thanks to everyone for their help. Even though I solved this on my own your suggestions led me down the right path of trial and error.

    I appreciate everyone’s time and contribution to this matter: it was driving me crazy.


    I also came across an amazing FTP client and code editor for iPad Pro for when your not at your computer. Horrible name, but it’s called Textastic and is very well made. Anyone with an iPad should check it out, it is great.
25

Im wondering if someone could help me out here please.
Im trying to use a 404 page template I have. It has html source and a css file as well. Im running Viva theme, so I added an html/smarty block into the 404 main page, it shows fine but I cant see where to add custom CSS for this html block only?

@import url('https://fonts.googleapis.com/css?family=Merriweather+Sans')
main
	height: 100vh
	width: 100vw
	background: #fff
	display: flex
	flex-direction: column
	justify-content: center
	align-items: center
	font-family: 'Merriweather Sans', sans-serif
	#errorText
		font-size: 22px
		margin: 14px 0
	#errorLink
		font-size: 20px
		padding: 12px
		border: 1px solid
		color: #000
		background-color: transparent
		text-decoration: none
		transition: all 0.5s ease-in-out
		&:hover, &:active
			color: #fff
			background: #000
	#g6219
		transform-origin: 85px 4px 
		animation: an1 12s .5s infinite ease-out
@keyframes an1
	0%
		transform: rotate(0)
	5%
		transform: rotate(3deg)
	15%
		transform: rotate(-2.5deg)
	25%
		transform: rotate(2deg)
	35%
		transform: rotate(-1.5deg)
	45%
		transform: rotate(1deg)
	55%
		transform: rotate(-1.5deg)
	65%
		transform: rotate(2deg)
	75%
		transform: rotate(-2deg)
	85%
		transform: rotate(2.5deg)
	95%
		transform: rotate(-3deg)
	100%
		transform: rotate(0)

If I add a user defined css class in the block, whats the best way to add the new class to cscart? Am I best to create a css file with the css in and call this in mychanges? How do I apply this in the block?

thanks!

26

Just add class to the block and use CSS section of the Theme editor to specify styles for this block

27

.404css {
CSS code
}

thanks ecomlabs, yes I added the css to the custom css file in public_html/design/themes/vivashop/styles/data/mystyle.css

but it just breaks the homepage layout totally.! Thats before I add the 404css as the css class to use in the 404 page html block

thanks for the help

28

Post the example here. Possibly some brackets or rules are not closed

29

Thanks. This is the code url https://codepen.io/JuliaSS/pen/ZMaXQV

It should show like this

https://freefrontend.com/assets/img/html-css-404-page-templates/404-Page-Something-Broke.mp4

Ok I have this for the html in the block (with the css in tags)

 {
 @import url('https://fonts.googleapis.com/css?family=Merriweather+Sans')
main
height: 100vh
width: 100vw
background: #fff
display: flex
flex-direction: column
justify-content: center
align-items: center
font-family: 'Merriweather Sans', sans-serif
#errorText
font-size: 22px
margin: 14px 0
#errorLink
font-size: 20px
padding: 12px
border: 1px solid
color: #000
background-color: transparent
text-decoration: none
transition: all 0.5s ease-in-out
&:hover, &:active
color: #fff
background: #000
#g6219
transform-origin: 85px 4px 
animation: an1 12s .5s infinite ease-out
@keyframes an1
0%
transform: rotate(0)
5%
transform: rotate(3deg)
15%
transform: rotate(-2.5deg)
25%
transform: rotate(2deg)
35%
transform: rotate(-1.5deg)
45%
transform: rotate(1deg)
55%
transform: rotate(-1.5deg)
65%
transform: rotate(2deg)
75%
transform: rotate(-2deg)
85%
transform: rotate(2.5deg)
95%
transform: rotate(-3deg)
100%
transform: rotate(0)
}


 
    
    
    
      
        
      
      
        
      
    
    
      
        
        
          
          
          
          
          
          
          
          
          
          
          
          
          
          
          
          
          
          
          
          
          
          
          
          
          
          
          
        
      
    
    
      
        
      
      
        
      
    
  
  
O-o-oh! Something broke.

  Go Back

I also tried it by adding the user defined css field and then I defined and added the css in the vivatheme css style file for my own saved theme (the version with all my changes in). When I did this it killed the homepage.

The css file I added the code to was public_html/design/themes/vivashop/styles/data/mysitestyle.css -> in this folder there is also mysitestyle.less

Any help is appreciated. I was reading a guide about using mychanges to include my own CSS file but dont think I need to that for this as there is no style applied to this block, so I dont need to use .less I am sure?

At the moment I am getting the graphic image and the text, but it is not animated or centred on the page. So basically the css is being ignored but the html is displayed

THANKS

30

Your code has a lot of errors. It causes the issue. Find someone who is familiar with CSS to correct your code

31

Thanks yes I know this I am looking into it. I have made different css code work on the block . I will probably use some different code, easier for an error page.