docnzok
-
Posts
73 -
Joined
-
Last visited
Content Type
Profiles
Product Forums
Articles
Posts posted by docnzok
-
-
It is definitely still avail. My whole site would collapse if they took it away.
-
Neo
Tell me what you are trying to do and I will try to help.
I use an svg image in a mirrored container to achieve a custom page divider.
Like this.
Let me know what you want to accomplish
-
Good Morning from YETI Lacrosse in Chicago
So you can change the background color and the text color of the Text Block Text Color. I made the example look like this:
It's really pretty simple.First - obviously add your text box. While you are doing that - add the classname - subtext. It is located on the same screen where you enter the text.
Next - a little about SportsEngine css if you are not aware of it.
On each page of a SE website you have the ability to enter custom CSS to change page elements. (Sometimes you may not be able to see Edit <HEAD> Code - just contact your rep and they can turn it on for you)
When you enter the head code area there are 2 boxes.
The first is single page. Anything entered in this box will effect ONLY THE PAGE YOU ARE ON.
The second box is Cascading. Anything entered in this box effect this page AND ALL PAGES BELOW IT.
Cascading is the most popular because of the ability to migrate the code down to all the pages. THERE IS A CATCH HOWEVER.
You must enter the Cascading code on EACH PAGE THAT RESIDES IN THE MAIN MENU. If you enter the Cascading Code on any of those pages, the code will 'trickle' down.
So
if you want this effect on one page - use the single page entry.
If you want this effect on all the pages - use the cascading entry and ensure it is placed on the highest level page on your site. (go to home - select pages - then select main menu - all those pages are top level)
FINALLY
This CSS Code will change the subtitles as long as you enter the class name where I indicated on the add text box element.
<style>
.pageEl.subtext H3 {
background-color: red;
color: white;
}
</style>
Close up the HEAD CODE dialog box and let the page refresh and that should take care of you.
[Just as a note - you can also use the # html colors for the Background-color and color - i.e. background-color: #339966 (green) ]
You can find those colors all over the internet but here is a good resource.
That should take care of what you need to do...Mark
YETI Lacrosse
(SportsEngine)
-
Did you find out how to do this - I found a solution to the problem if you need it.
Mark
☠
-
Not sure if you found the solution to this but SE does have a way to upload several banner graphics and place them only on certain pages of your site.
Mark
-
Occasionally, the option is not turned on by SE for whatever reason. Just email your sales rep and they can turn it on. Takes a couple of minutes.
So you do not see edit <head> code under page options? If not then just email your rep.
-
Believe it or not, you can actually add html code in the subtitle box!!!
Check it out
Have fun with that!
Mark
Chicago
-
So you just want to show the menu on the top menu but not have the ability to click any of those?
So I assume you have all the camp info in the menu title?
Tell me if that is the case.
If that is the case, SE only creates a menu item for a linked page.
I guess you could add code to the page options like javascript so when they click a menu item it would go to the page quickly and then re-direct somewhere.
Thats a tough one.
I would just put all the info that you want in the menus on one page and maybe use tab elements.
Mark
Chicago
-
There are basically 3 ways to include css in SportsEngine
1. Add the CSS to the single page head code
2. Add the CSS to the cascading page head code
3. Add a link to your external css file to the head code.
The first two are found in the page options when you go to edit mode.
The difference between the 2 section is
-The single page head code will only apply to that page.
-The cascading page head code will apply to that page and all pages that are under it in the menu
So if you have several top level pages (i.e. about us, schedule, games, rosters) you have to put your head code on each of the top pages in the cascading head code section.
Finally - if you want to use an external css file, I have had luck with uploading the css file to an admin page so the SE creates a link. Then you can add the link to the head code (using the above instructions) using the link to the css file on the admin page.
Thats my story and I'm sticking to it.
Mark
Chicago
-
One other thing to consider is a mirror element.
We use lacrosse sticks that are SVG files, which means whatever size container you put them in, they resize to that container width. Simply create an SVG image inside a Layout Container, name it, and then mirror it. Then you just add the mirror wherever you want the divider.
You can also mirror a layout container with code in it. So if you have the <HR> looking like you want it, simply name the layout container and then mirror it.
That way you dont have to copy and paste all the time.
Just a suggestion
-
Just a clarification here.
In page options:
Single Page <HEAD> Code:
This modifies the CSS and style ONLY ON THE SINGLE PAGE YOU SET IT
Cascading <HEAD> Code:
This modifies the CSS and style on THIS PAGE AND ALL PAGES THAT FALL BELOW IT.
You have to set the Cascading <HEAD> Code on ALL THE TOP LEVEL PAGES (by copying your style from a page that is styled the way you want) to the other TOP LEVEL pages and then all pages on the site will be styled the same.
-
1
-
-
You can customize the buttons using CSS, however, they are built as a list so whatever CSS you apply, will apply it to all the buttons on that page.
Here are my normal blue team buttons that are placed when I select insert a team button.
Adding some CSS, the buttons are now changed to whatever color you pick, and I have added the color of the hover as well which is the color they will turn when the mouse goes over them.The CSS Code is only needed on the page that the buttons are on so you do not need Cascading.I also added a radius to the buttons for a rounded look.
Just add this CSS to the Options/Edit Head Code/SINGLE PAGE Head Code
<style>
.widget-teamButtons a {
background-color: red;
border-radius: 10px;
border-color: red;
}
.widget-teamButtons a:hover {
background-color: yellow;
}
</style>
That should do the trick.
Mark
-
Julie
Its no problem. I never sleep anyway.
So the arrow is actually a graphic that is coming from what is called a sprite. On that particular sprite sheet NGIN has about 50 icons that they use throughout the sites. So in order to get that arrow a different color...
So I think what you want to do is create a custom link class that you can choose to use for links , thus keeping the ability to use the default link style somewhere.
I will write up a quickie style example this evening for you.
Mark
-
Julie
SO you can go about this three ways
1. Create your own image of what you want the link to look like and then add some CSS (specifically Hover CSS) to make it look like a link.
I did that on truelaxrecruits.com about mid way down the page...hover or rollover the True Boys or True Girls images and they change with pure CSS. They are also links. That is option 1
2. Modify the current link CSS to make the link look like you want it (basically you have to overwrite the CSS the SE provides and make the links look and behave how you want them.
3. Create your own class of link that you can use throughout your site. Maybe the better way to go.
For #1
see truelaxrecruits.com and see if that is the way you want to go.
For #2
In the Options section of the page add the following CSS code to the cascading <Head> Code
<style>
.linkElement h4 a {
color: black;
background-color: white;
box-shadow: none;
transition: all .5s;
display: block;
padding: 5px 5px 5px 5px;
} </style>
For #3
Completely build the button in CSS with hover and over
If you want to do that, I can build up some code for that.
I think you will be able to get the effect you are looking for if we jsut play with it.
Let me know your thoughts on the examples I have setup here.
Mark
-
Ok so there are a few things going on here.
There is a style that applies to the link on the page and a style that applies to the overall link of the entire theme
Is this what you are looking to do. (Note the arrow is there as I am in developer mode, so it doesnt look like an arrow.
The link style that I can show you how to change applies to the box that wraps the link itself.
The underline that you see is applied from the overall theme.
I can help change both of them for you
Also, take a look at the front page of cgylax.com and hover over the blue links (i.e. coaching staff or game center) and see how I did those links with a little animation.
Let me know how I can help. I guess what is needed is exactly how you want the link to look and then behave when you click or hover.
Once I have that, I can do up some CSS for ya.
Mark
-
You can apply CSS to almost anything on the NGIN platform.
Can you send an example (or page link) of what the link looks like now and then what you want it to look like?
I'm sure we can figure out a solution for you.
Page Divider
in Website Code Library
Posted
You are able to add a CSS Class to the divider so as long as you have it formatted the way you want and the css is available on that page, you can just put in the css class when you add it.