[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 351
  • Last Modified:

CSS in Frontpage Themes

Hi,

I was looking at the CSS files in Frontpage Themes and found this code:

.mstheme
{
      nav-banner-image: url(arcbanna.gif);
      separator-image: url(arcsepa.gif);
      list-image-1: url(arcbul1a.gif);
      list-image-2: url(arcbul2a.gif);
      list-image-3: url(arcbul3a.gif);
      navbutton-horiz-pushed: url(arcnavhp.gif);
      navbutton-horiz-normal: url(arcnavha.gif);
      navbutton-horiz-hovered: url(arcnavhh.gif);
      navbutton-vert-pushed: url(arcnavvp.gif);
      navbutton-vert-normal: url(arcnavva.gif);
      navbutton-vert-hovered: url(arcnavvh.gif);
      navbutton-home-normal: url(archomea.gif);
      navbutton-home-hovered: url(archomeh.gif);
      navbutton-home-pushed: url(archomea.gif);
      navbutton-up-normal: url(arcupa.gif);
      navbutton-up-hovered: url(arcuph.gif);
      navbutton-up-pushed: url(arcupa.gif);
      navbutton-prev-normal: url(arcpreva.gif);
      navbutton-prev-hovered: url(arcprevh.gif);
      navbutton-prev-pushed: url(arcpreva.gif);
      navbutton-next-normal: url(arcnexta.gif);
      navbutton-next-hovered: url(arcnexth.gif);
      navbutton-next-pushed: url(arcnexta.gif);
}


.mstheme is a class name.  But what is:
navbutton-home-pushed
navbutton-up-normal
navbutton-prev-hovered
list-image-1
list-image-2
list-image-3
nav-banner-image

Are they SELECTORS?

Or are they defined somewhere else as selectors and were mentioned here.

Thanks
0
hhammash
Asked:
hhammash
  • 8
  • 5
  • 2
2 Solutions
 
sajuksCommented:
They are the graphic elemnts used in Active graphic modes.
Because hover graphics are supported in the Active Graphics mode, an additional set of buttons are
required for when the user hovers over the button.
For reference http://www.microsoftfrontpage.com/usingfp/dpa/theme.html
0
 
hhammashAuthor Commented:
Hi Sajuks,

Thank you for youre reply.

What is 'navbutton-home-pushed' I am asking about it as a piece of code. Is it a CSS code or here in the themes it is just defined somewhere else and used here?

thank you

0
 
sajuksCommented:
These are used in the default navigational themes provided by FP. Its a part and parcel of the FP theme.
One of the frontpage theme mode is Active graphics. When you check the box to set it on you need an
additional set of buttons when the user hovers over the button. Thats when the
navbutton-prev-hovered come into picture. For normal mode the css applied for the buttons of pushed and normal are that of navbutton-home-pushed and navbutton-up-normal .
It provided the style of that particular  button. It is a part of CSS.
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
hhammashAuthor Commented:
Hi Sajuks,

I'll clear it more:

Here in this CSS code:

p.products
{
text-align:left;
font-family:arial;
text-size:15px;
color:cyan
}


You have text-align
font-family
text-size
color

These are known selectors with values after them.

Now are these selectors:

navbutton-home-pushed
navbutton-up-normal
navbutton-prev-hovered
list-image-1
list-image-2
list-image-3
nav-banner-image

because after them the is the :url('picturename')

If not CSS specific code,  are they variables defined somewhere else and referenced here?

Thank you

0
 
hhammashAuthor Commented:
Hi Sajuks,

Sorry I meant properties,  not selectors.  Replace Selectors in my previous post with properties.

Are they properties that can be used in a class.

Thank you
0
 
sajuksCommented:
This theme is available only in frontpage when you click on the checkbox to  activate the theme mode .If the theme mode is off you wont be accessing these properties. Are you using the fp theme properties or are you trying to access these in you normal css code? That wont work (i think, not worked too much in FP). When using FP theme properties the css gets automatically generated. You could change the css after it has been generated but you do need the theme for it to be working properly.
When you push the navigation button there are two default events ( unless you selected the active graphic mode).The buttons are actually images and their looks change based on the action of pushed/normal(default)/hover.

You could use the url('picturename') for your image files too in CSS.
0
 
sajuksCommented:
If you've defined the images to've a class of navbutton-home-pushed( example) then you could use its properties.
Hold on i think its time for seanpowell ( and others of course)  lto show up and after all he is one of the experts in FP.
Sorry cant help you more
0
 
sajuksCommented:
navbutton-home-pushed
navbutton-up-normal
navbutton-prev-hovered
list-image-1
list-image-2
list-image-3
nav-banner-image

Al lthese are image files found in the navigation themes of FP.
0
 
hhammashAuthor Commented:
Hi Sajuks,

I know,  you are right,  themes are only in Frontpage.  

Quote
-------
"If you've defined the images to've a class of navbutton-home-pushed( example) then you could use its properties."


unQuote
----------------

This is my question,  I am not interested in Frontpage Themes.  How can I define something then use it as a property.  And when used it will affect what I defined.

Thank you Sajuks.
0
 
hhammashAuthor Commented:
And mainly,  where to define?
0
 
mreuringCommented:
There's no spec for defining and implementing you own cutom css-properties. FrontPage can only do this because it is build by the same guys that build the rendering-engine. It is allowed by the specs to defince custom (vendor)properties but there's no framework available which allows you to do so when your not the vendor of your targetted rendering-engine.

Having said that, if you're really set on doing it anyway, you could parse the css yourself by using JavaScript and then define your JavaScript behaviours based on this. I have done something of the sort, only in my case I used it to alter the default behaviour of an existing css-property.

A better way of solving your problems might be a small fix on the default IE rendering behaviour. IE is incapable of using the :hover pseudoselecter on anything other than the 'a'-tag. However all other browsers do not have this inhibition. You could for instance do this:
<div id="navbar"><a class="button_previous" href="previous.html" rel="navigation">Previous</a><a class="button_next" href="next.html" rel="navigation">Next</a></div>

And set your css up to do:
#navbar a.button_previous {
   background-image: url(previous.gif);
} #navbar a.button_previous:hover {
   background-image: url(previous_hover.gif);
} #navbar a.button_previous:active {
   background-image: url(previous_active.gif);
}

Just a short example of an alternative off course,

 Martin
0
 
hhammashAuthor Commented:
Hi Marting,

First:
-------
Good example:

what is rel="navigation"

Second:
---------
Would you please explain your example?

sepcially a.button_previous

Thank you
0
 
mreuringCommented:
Sorry, according to the w3c specs for xhtml a link no longer has a target, it now has the property rel. I've been using this to let my behaviours (read javascript eventhandlers) react on the link in specific ways. It reads well semantically while not implying the exact way it'lll function (good for seperation)

With good use of html and css semantics become important. Using div's with classes and or id's for structuring and grouping content. So in the used example you use the div as a container for some navigation buttons. The navigation buttons are just links that might, or might not have some specific behaviours linked to them.

Now having the structure set up you can start using css to target parts of that structure and style those parts acordingly. For instance:
 #navbar a.button_previous:hover
Would read as (in simplified english):
select 'a'-element with class 'button_previous' when mouse :hover and only if element is contained by an element with id 'navbar'

Hope this helps,

 Martin
0
 
hhammashAuthor Commented:
Great,

Here you created pseudo classes.

Thank you Martin
0
 
hhammashAuthor Commented:
Thank you Sajuks and Martin
0

Featured Post

Upgrade your Question Security!

Add Premium security features to your question to ensure its privacy or anonymity. Learn more about your ability to control Question Security today.

  • 8
  • 5
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now