[Pro] HTML Markup & CSS styling of multiple buttons

Freeway
1

The following page on my site is where I post recurring events:

http://visionsecurity.jp/event.html

I currently have only 1 event listed, but sometimes I have multiple events on that page. I am now styling the 2 small buttons (shown immediately to the left of the Calendar: リンク & 地図) with CSS inside Page HTML Markup via the following code:

<style type="text/css">
<!--

/* Styling the Serial Search button */
#LinkBtn,#MapBtn {
    min-width: 65px;
    background-color: #b9cbdb;
    background-image: none;
    cursor: pointer;
    text-decoration:none;
    font-family: 'Hiragino Kaku Gothic Pro','平成角ゴシック',HeiseiKakuGothic,Osaka,'メイリオ','Meiryo','ＭＳ Ｐゴシック','MS PGothic',Sans-serif;
    font-size: 12px;
    color: black;
    padding: 3px 5px 1px 5px; /* top right bottom left */
    border: 1px solid #fff;
    outline: 0;
}
#LinkBtn:hover, #MapBtn:hover {
    color: white;
    background-color: blue;
    border: 1px solid #fff;
    outline: 0;
}
#LinkBtn:active, #MapBtn:active {
    color: white;
    background-color: red;
    border: 1px solid #fff;
    outline: 0;
}

/* Rounding the button */
.RoundBtn { 
-webkit-border-radius: 5px; 
-moz-border-radius: 5px;  
border-radius: 5px; 
-webkit-background-clip:padding-box; 
background-clip:padding-box; 
}

-->
</style>

PROBLEM: When I add other events to the page, the 2 buttons on each of those entries are not styled. I have 60 different possible event combinations. I don’t want to have to put 60 different name values in the CSS to ensure the 2 buttons on each event object are properly styled. How do I solve this problem?

More specifically…

All my unused events are stored in the pasteboard with Publish unchecked. I want to be able to drag events as I please to the page, tick Publish, then publish and see the 2 buttons styles properly, without having to change my HTML Markup CSS code every time. How do I accomplish this?

Thanks,

James Wages

freewaytalk mailing list
email@hidden
Update your subscriptions at:

2

Never mind, I solved it myself. Instead of using the Name/ID in my HTML Markup CSS, I used the Class instead (added to via Item > Extended). That styles all the buttons quite nicely.

<style type="text/css">
<!--

/* Styling the Serial Search button */
.RoundBtn {
    min-width: 65px;
    background-color: #b9cbdb;
    background-image: none;
    cursor: pointer;
    text-decoration:none;
    font-family: 'Hiragino Kaku Gothic Pro','平成角ゴシック',HeiseiKakuGothic,Osaka,'メイリオ','Meiryo','ＭＳ Ｐゴシック','MS PGothic',Sans-serif;
    font-size: 12px;
    color: black;
    padding: 3px 5px 1px 5px; /* top right bottom left */
    border: 1px solid #fff;
    outline: 0;
}
.RoundBtn:hover {
    color: white;
    background-color: blue;
    border: 1px solid #fff;
    outline: 0;
}
.RoundBtn:active {
    color: white;
    background-color: red;
    border: 1px solid #fff;
    outline: 0;
}

/* Rounding the button */
.RoundBtn { 
-webkit-border-radius: 5px; 
-moz-border-radius: 5px;  
border-radius: 5px; 
-webkit-background-clip:padding-box; 
background-clip:padding-box; 
}

-->
</style>

freewaytalk mailing list
email@hidden
Update your subscriptions at: