Viewing Inserting code

Inserting code



User: Yelena 10 years ago
I have a question that will make some users laugh...: I know...but I need help. How exactly can I insert CSS into the BODY of the page?

I know how to find the .html of a specific page, how to open it's source, how to copy and edit it. But where do I put that edited document? In EW there is Header Code and Footer code. Simply inserting CSS into an HTML Widget doesn't produce correct result. So please educate me on this issue.... :lol: :lol:

-------------------------------
Yelena
MacBook Pro OS X 10.10.3
IMac 21" OS X 10.10.3
User: Roddy 10 years ago
You need to use method [c] below.

I posted all this stuff in another topic...

CSS can be added using four different methods:

[a] Imported from an external stylesheet like this...



[b] Embedded into the of the HTML doc...



[c] Inline inside HTML tags...

This is a red heading with a black background



[d] Importing styles from another stylesheet...

@import "more-styles.css";

EasyWeb allows you to insert styles using all these methods.

For example, you could have an external stylesheet with the rules for the header, h1, h2, h3, h4, headings and the footer and insert it using method [a] in the site-wide head code box in the publishing settings page.

Then you could overwrite any of these rules per page by inserting the CSS in the page inspector head code box using method [b].

Individual styles in HTML Snippets can be inserted using [c].

[d] probably has no great use in an EasyWeb created site.

Each has it's advantages and disadvantages.

I usually write my styles on one or more stylesheets. Complicated items like a media player can have a separate sheet which only needs to be inserted in one or two pages. Contact form styles only need to be inserted in the Contact page and so on.

A lot of the styles you see in the head code of your pages will be for the navigation. If you insert your own design using a snippet you can use an external stylesheet and insert the link once in the site-wide head code box. Cutting down the amount of code in the HTML file is helpful when you are actually writing code to make it easier to find stuff. I don't think the average EW user will be doing this!

The great thing about EasyWeb is that, if you take the trouble to learn some HTML and CSS, you can create features that other users will only be able to dream about. An understanding of the different types of code will allow you to create a far better website.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Yelena 10 years ago
Thank you, Roddy! I will play with all of that... I was specifically trying to insert a CSS3 Menu - a navigation bar...I use their program, create a code but don't seem to be able to insert it properly....If you have instructions for that specific task could you post a link here?

-------------------------------
Yelena
MacBook Pro OS X 10.10.3
IMac 21" OS X 10.10.3
User: Roddy 10 years ago
Is this what you are using?

http://css3menu.com

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Yelena 10 years ago
Yes!

-------------------------------
Yelena
MacBook Pro OS X 10.10.3
IMac 21" OS X 10.10.3
User: Roddy 10 years ago
I found an old copy of the app and had a look at the code it presents us with. It's not going to be easy to insert this menu into EW because of the way in which the files are organized.

The app produces a folder with the stylesheet and some images. EW will not allow us to import the folder into assets so you would need to drag in the stylesheet plus all the images and then change the relevant URLs to the images in the stylesheet.

Dragging the stylesheet into assets may work OK for you if you are publishing to the EW server but doesn't work if you are publishing to a local folder as I have found out to my cost!

You could also copy all the styles and paste them into the site wide head code box but you would still have to change the image URLs. Then you would have to open the html file that the app produced and copy the relevant code - not all of it is required - and then paste this into an HTML Widget.

The whole process would have been a lot simpler if we could upload assets to the EW server or add a directory to the assets. One of these needs to be implemented in EW - developers please note!

If you want to jump through all these hoops I can walk you through it.

A better way would be to go to this site to create your menu...

http://cssmenumaker.com

It will be a lot easier to implement in easyWeb.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Yelena 10 years ago
Thank you, Roddy! I am sorry you spent all this time searching it out....It is way too much work. I will definitely play with the other one you mentioned. Thank you!

-------------------------------
Yelena
MacBook Pro OS X 10.10.3
IMac 21" OS X 10.10.3
User: Roddy 10 years ago
You'll find the other one much more straight forward and the instructions a lot better. Let me know if you need help with it.

Like other apps of its kind, CSS3Menu.app assumes that you have access to the server which EasyWeb users don't.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Yelena 10 years ago
I am still publishing to a Folder though. I created a menu but still don't understand where the "menu_assets" folder needs to go....:(

-------------------------------
Yelena
MacBook Pro OS X 10.10.3
IMac 21" OS X 10.10.3
User: Roddy 10 years ago
I just posted a topic about this today...

http://ragesw.net/easyweb-beta/viewtopic.php?f=4...t=529

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Yelena 10 years ago
Thank you! Will try this as well...:)

-------------------------------
Yelena
MacBook Pro OS X 10.10.3
IMac 21" OS X 10.10.3
User: Yelena 10 years ago
OK, going crazy here...:)
Here are two photos. First the Menu with instructions. I did copy the first one and pasted it into Head code of the page, then copied the second one and pasted into HTML widget. I placed the "Menu_assets" into EWExternal Files.

Second picture is what I get....

-------------------------------
Yelena
MacBook Pro OS X 10.10.3
IMac 21" OS X 10.10.3

Screen Shot 2013-06-14 at 6.36.08 PM.png

Screen Shot 2013-06-14 at 6.36.22 PM.png
User: Roddy 10 years ago
If you placed the menu folder in ewExternalFiles you need to put that in the file path that goes in the Head Code box...

http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Yelena 10 years ago
OK, I followed all these steps but still no luck - the menu appears but not styled, just a list...Also tried to send a PM but it seems to be sitting in my Outbox and not sending...

-------------------------------
Yelena
MacBook Pro OS X 10.10.3
IMac 21" OS X 10.10.3
User: Roddy 10 years ago
OK, I got it.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.


Post Reply
You must login or signup to post.