decreasing fonts size in logo content box

keen but not sure · August 7, 2014

I would like to create a page called events. It will list up to 40 events. Each event will be a link to a gallery. These events are not randomly placed on the page....they are organized by a specific subject. I have been using logo content boxes to create the text links (to each gallery). I'm using this text box as it allows the text color to be different. The issue is the size XS is still too big. Sorry for the vagueness of size but I would like to have the font size decreased so it is half the size of XS.

Below is a link to the page I'm trying to modify with coding.

http://gordonleephotography.smugmug.com/Website/Website-pages/Events

I used the logo content box and created the blue text (Victoria vs PortAlberni Sep27). I would like to shrink this blue text to look like the sizing of the white text below it (also Victoria vs PortAlberni Sep27).

I need some coding to help me reduce the size of the blue text.

Hikin' Mike · August 7, 2014

Looks like you have not unveiled your new site yet. Only you can see it, everybody else sees your old (Legacy) site. I need to see it live before I can help.

keen but not sure · August 8, 2014

oh...you can only help smugmug sites if they are published
Thank you for trying to look into this matter.
I am so not ready to publish my client's website ...yet.
If this is the case...until I publish his site...you folks will be unable to help me with coding?

keen but not sure · August 8, 2014

only published websites can be provided coding help?
Thank you for looking into this matter.

I am not comfortable with the new smugmug site and I'm sure my client would not be thrilled to see his website go from 'It was fine the way it was' to 'why did you have to change it?' So until I get this new smugmug looking like his current site...it will stay as is 'unveiled'. I am so close to unveiling and publishing it but this one page....is the stumbling block because I need help with coding...something I had avoided doing in his other website.

Smugmug heros has stepped up to the plate and has provided me with the coding for changing the text color of logo content boxes. Unfortunately...I ended up having 50 titles that had irregular spacing due to subject titles needed for organization.

I originally had used navigation menu content boxes for the page but I did not have the knowledge that text color can be changed. I would like to have coding to change the color to #7393f0. Is there a general coding for changing the text color of navigation menu boxes (for that specific page only...not site wise)

Allen · August 8, 2014

keen but not sure wrote: »

...

I don't know why you are using the blocks you describe. If it was me I'd used an html block and then
everything in it is completely under control for any change.

keen but not sure · August 8, 2014

well...my experience with creating websites has basically been a drag and drop method. Works very well for me. Unfortunately...the new smugmug does not give me the choices I want to do and if I deviate from their cookie molds....I can only make changes through coding...something I have no had to learn

denisegoldberg · August 8, 2014

keen but not sure wrote: »

well...my experience with creating websites has basically been a drag and drop method. Works very well for me. Unfortunately...the new smugmug does not give me the choices I want to do and if I deviate from their cookie molds....I can only make changes through coding...something I have no had to learn

It is more straightforward to use an HTML block as Allen suggested than it is to use the logo block and determine the identifiers for the code you need to change.

--- Denise

Allen · August 8, 2014

This is what the html would somewhat look like placed in an html content. After initially set up all
you'd have to do is add/remove/edit/sort the links. And we would help with the initial setup.
This was just slammed together quickly so it isn't 100% correct. But gives you an idea of what is involved.

<div id="mainBox" style="text-align:center;">
  <span style="color:yellow; font-size:XXpt;">Events</span>
  <div id="leftBox" style="float:left; width:XXXpx; text-align:center;">
    <span style="">BCHL 2013-2014</span>
    <a href="link">Victoria vs Port...</a><br><br>
    <a href="link">Victoria vs Port...</a><br><br>
    <a href="link">Victoria vs Port...</a>
  </div>
  <div id="rightBox" style="float:right; width:XXXpx; text-align:center;">
    <span style="">DANCE</span>
    <a href="link">Boston Solo ...</a><br><br>
    <a href="link">Boston Solo ...</a><br><br>
    <a href="link">Boston Solo ...</a>
  </div>
</div>

keen but not sure · August 8, 2014

html blocks...how big is the learning curve?
So far...your html block looks fine.
This skill is way out of my comfort zone but I'm willing to put time into learning how to get this page the way I want before I return to my real paying job...working at a school in about 3 weeks.

For starters...I would like the title Events on it's own line and centered.

I have subject headings and I notice the first event title is on the same line as the subject heading.
How does one get to move it down below it.

Also...could the event titles...like Victoria vs Port Alberni....be colored text #7393f0

I'm assuming that links to galleries can be added to each event.

If this is the case...how do I go about learning how to do this.

I know you are a true volunteer...very giving of your time and expertise....I am very thankful for this and I hope Im not asking too much for you to make these changes. With you showing me the changes you make...that is how I can learn to add more html coding myself.

If I'm really asking for too much....please let me know....as my intention is not to be a pest.

keen but not sure · August 8, 2014

I'm learning html!!
Holy cow!
I went back and studied line by line of the html block and managed to make the changes I was requesting from you.
I have the title Events...centered, larger and on its own line.
I have moved one of games that was listed on the same line as the subject down its own line.

I will continue adding more games or events to this page.

However....

Where do I add color #7393f0 for each of the games(or events) and can you give me an example of a link to one of the galleries ...I have no idea how to link a game(or event) to one of the galleries in the smugmug acct

Hikin' Mike · August 8, 2014

I just have to ask. You're being paid to design a Smugmug website, but you don't know anything about HTML/CSS?

You might try downloading one of the web tools. It will help you find the section to change. I personally use 'Firebug' for Firefox.

keen but not sure · August 8, 2014

Who said I was being paid? I just do websites on the sideline... I have lucked out with website programmes that don't require coding.

Everything was fine until smugmug made 'improvements' and with the impending demise of legacy smugmug...I'm trying to stay ahead of the game by learning it now and making it as similar as possible to the current website...I use the smugmug gallery links to attach it to the 'iframes' within the current website. Once legacy is gone the new links may not work with 'iframes' . So it's imperative I learn the new smugmug well and recreate the old website in the new smugmug. I'm 90% done.

For now, my goal...is to recreate the page called Events...so close but I need help to tweak it to make the links work. As of now...every time I click on one of the events within the html box...it takes me to the homepage rather than a specific gallery...so I know something is not right with my coding.

I am on the web studying any info on html ...but was so hoping for someone just to give me the 'recipe' for getting this page working. I'm almost there...but not quite.

1. how to color the text in html
2. link these up to specific galleries in smugmug

I work off safari..not firefox...any suggestions?

Hikin' Mike · August 8, 2014

I guess I misunderstood your client's work. I just assumed you were getting paid. My fault.

If you're using Allen's "recipe" he posted above you'll need to copy the URL of each gallery and post the code in place of the link text here "<a href="link">".

Add this to the CSS box:

#mainBox {
    color: #7393f0;
    }

If you're not using Allen's code, please post the code here.

keen but not sure · August 8, 2014

adding color text to the link
thank you Mike....the link I get and am currently doing.
I don't want to color the whole main box with one color...I want the 'links' in that main box to be a different color #7393f0
Here is one of the links...where would I add the color info on this....

Victoria vs Port Alberni Mar 12

Hikin' Mike · August 8, 2014

Try this. I added a hover color too. Right now it won't work until you select a color,

#mainBox a {
    color: #7393f0;
    }
#mainBox a:hover {
    color: ;
    }

keen but not sure · August 8, 2014

I know I am to insert it in the html box but exactly where would I insert your color code into what I already have ?

Hikin' Mike · August 8, 2014

keen but not sure wrote: »

I know I am to insert it in the html box but exactly where would I insert your color code into what I already have ?

This goes in the CSS section of the HTML box.

#mainBox a {     
    color: #7393f0; 
    }

#mainBox a:hover {
     color: ;
     }

Allen · August 8, 2014

That html was just a quick throw together to basically show you what it might look like. There are
all kinds of ways to format it. Notice I named each block.
In the html block CSS tab you could add
#rightBox,
#leftBox {color: #7393f0;}

If you notice #mainBox is around everything which will affect it all.

keen but not sure · August 8, 2014

I would like only the links of each box...right and left to have blue text. The text for the subject headings in the right and left box can remain white. Can only the links be blue?

Hikin' Mike · August 8, 2014

keen but not sure wrote: »

I would like only the links of each box...right and left to have blue text. The text for the subject headings in the right and left box can remain white. Can only the links be blue?

Yes. The code I posted above should work.

keen but not sure · August 9, 2014

Just wanted to say....THANK YOU

I have been stewing on this page for a couple of weeks and with the help at dgrin... it was solved in one day!

I no longer fear coding and knowing you folks are right here to support us with smugmug...I will probably have to change my name from 'Keen but not sure' to 'keen to know'

Thank you
Jeannie

keen but not sure · August 10, 2014

what is the html coding for 3 blocks of text in the main box
Hi....Allen had quite kindly provided me the html for 2 boxes in the main box...
but I need 3 blocks of text (3 columns) in the main box

DGrin’s Allen’s original html coding for events page

Events

BCHL 2013-2014
Victoria vs Port...

Victoria vs Port...

Victoria vs Port...

DANCE
Boston Solo ...

Boston Solo ...

Boston Solo ...

Hikin' Mike · August 10, 2014

I modified a 4-column splash page I created and came up with this:

HTHML Here
[html]
<div class="column-wrap">
<div class="column">
<ul>
<h2>Column One</h2>
<li><a href="Link-Here">Text Here</a></li>
<li><a href="Link-Here">Text Here</a></li>
<li><a href="Link-Here">Text Here</a></li>
<li><a href="Link-Here">Text Here</a></li>
<li><a href="Link-Here">Text Here</a></li>
</ul>
</div>
<div class="column">
<ul>
<h2>Column Two</h2>
<li><a href="Link-Here">Text Here</a></li>
<li><a href="Link-Here">Text Here</a></li>
<li><a href="Link-Here">Text Here</a></li>
<li><a href="Link-Here">Text Here</a></li>
<li><a href="Link-Here">Text Here</a></li>
</ul>
</div>
<div class="column">
<ul>
<h2>Column Three</h2>
<li><a href="Link-Here">Text Here</a></li>
<li><a href="Link-Here">Text Here</a></li>
<li><a href="Link-Here">Text Here</a></li>
<li><a href="Link-Here">Text Here</a></li>
<li><a href="Link-Here">Text Here</a></li>
</ul>
</div>
</div>
[/html]

CSS Here

/* Column Wrap */
.column-wrap {
    text-align: center;
    color: #;
    }
.column-wrap h2 {
    color: #;
    }    
.colomn-wrap a {
    color: #7393f0;
    }
.colomn-wrap a:hover {
    color: #;
    }    

    /* Column Container */
.column {
    width: 32%;
    display: inline-block;
    float: left;    
    }    
.column ul {
    list-style: none;
    }    
.column:nth-child(1) {
    float: left;
    }
.column:nth-child(2) {
    margin: 0 1.25%;
    float: none;
    }
.column:nth-child(3) {
    float: right;
    }    
    
@media only screen and (max-width: 799px) {
    .column,
    .column:nth-child(1),
    .column:nth-child(2),
    .column:nth-child(3) {
        width:100%;
        clear:both;
        margin:0 auto;
        }
}

keen but not sure · August 10, 2014

changing the color of the text lines with links

Hikin' Mike wrote: »

I modified a 4-column splash page I created and came up with this:

Thank you..you definitely came through with 3 columns....I ended up not needing a heading for each column so I tweaked it out.
However...I would like the rest of the lines with text to be colored....how? #7393f0

One more thing...you have the 3 columns left align...I would like each centered align.

Thank you for helping out
Jeannie

Hikin' Mike · August 11, 2014

Add this in red to center the columns:

    /* Column Container */
.column {
    width: 32%;
    display: inline-block;
    float: left;    
    [COLOR=Red]text-align: center;[/COLOR]
    }

Hikin' Mike · August 11, 2014

I realized I had a typo on the CSS, so that's why the link color didn't work:

.[COLOR=Red]column[/COLOR]-wrap a {
    color: #7393f0;
    }
.[COLOR=Red]column[/COLOR]-wrap a:hover {
    color: #;;
    }

keen but not sure · August 11, 2014

text still not showing color

Hikin' Mike wrote: »
I realized I had a typo on the CSS, so that's why the link color didn't work:
.[COLOR=Red]column[/COLOR]-wrap a {
    color: #7393f0;
    }
.[COLOR=Red]column[/COLOR]-wrap a:hover {
    color: #;;
    }    

HI, the centering of the text worked but not the text coloring

Hikin' Mike · August 11, 2014

keen but not sure wrote: »

HI, the centering of the text worked but not the text coloring

Did you change see my typo. I originally had this:

.colomn-wrap a {
    color: #7393f0;
    }
.colomn-wrap a:hover {
    color: #;
    }

Should be this:

.col[COLOR=Red]u[/COLOR]mn-wrap a {
    color: #7393f0;
    }
.col[COLOR=Red]u[/COLOR]mn-wrap a:hover {
    color: #;
    }

If that didn't fix it (it worked on my test page), try adding the '!important':

.column-wrap a {
    color: #7393f0 !important;
    }
.column-wrap a:hover {
    color: #;
    }

keen but not sure · August 11, 2014

always good to begin html installation again

Hikin' Mike wrote: »

Did you change see my typo. I originally had this:

Hello Mike,

I ended up redoing the html and css coding you've given me for the page and just added the last 2 modifications did the trick. It's always good to take a break and come back with a fresher mind...that means starting the page over again...and it worked.

Much appreciated
Jeannie

Hikin' Mike · August 11, 2014

keen but not sure wrote: »

Hello Mike,

I ended up redoing the html and css coding you've given me for the page and just added the last 2 modifications did the trick. It's always good to take a break and come back with a fresher mind...that means starting the page over again...and it worked.

Much appreciated
Jeannie

Glad to help.

decreasing fonts size in logo content box

Comments