The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Logo link

3 posters

The forum of the forums :: Miscellaneous :: Garbage

Go down

Solved Logo link

Post by Gäst November 27th 2010, 11:27 am

Is it possible to edit the logo link with css?


Last edited by kalleankafansite on November 27th 2010, 2:18 pm; edited 1 time in total
avatar
Gäst
Guest


Back to top Go down

Solved Re: Logo link

Post by maiquang November 27th 2010, 11:54 am

yes
maiquang
maiquang
Forumember

Male Posts : 199
Reputation : 0
Language : VN
Location : HN

Back to top Go down

Solved Re: Logo link

Post by multikom4o November 27th 2010, 11:56 am

how?
avatar
multikom4o
New Member

Posts : 23
Reputation : 0
Language : Bulgarian

Back to top Go down

Solved Re: Logo link

Post by maiquang November 27th 2010, 12:04 pm

Code:
Before most browsers reliably supported CSS formatting, designers had to place text inside an image if they needed a special background color, size, spacing, or other formatting not supported by basic HTML.

Fortunately, you can now use cool text effects to create simple logos and other content using Cascading Style Sheets instead of images.

Create A Text Logo

We'll start by creating a class called "TheaterLogo" and then using an inline style definition for the site's tagline. Remember that the tagline is important: it's where you state your site's value proposition!

<style type="text/css">

.TheaterLogo
{
    background-color : white;
    border-style : outset;
    border-color: red;
    border-width:7px;
    height:85px;
    width:350px;
    color:maroon;
    font-weight:bold;
    font-family: "Comic Sans MS", sans-serif;
    font-size:28px;
    text-align:center;
}

</style>

This creates a logo with a white background, a rather thick red border, uses maroon text, aligned to the center, where the preferred font is Comic Sans font. The font will be 28 pixels in size and displayed in bold face. The height and width properties are determined by the amount of text you need to include and your page layout constraints.

Here's how you add it in the BODY section of your document:

<div class="TheaterLogo"> Calhoun Little Theater<br>
<span style="font-size:18px;text-align:none">Amateur
theatrical productions....
<br>    professional
quality!</span></div>

Add A Background Image

If you want to get really ambitious, you could even add a background image to create your site logo. It adds more visual interest without much extra download time.

Since you aren't making the text, border, and background color part of the image, visitors with images turned off will still see something more interesting than just ALT text.

Add a background image using the background-image property. Stop the image from tiling by setting the background-repeat property to the "no-repeat" value.

<style type="text/css">

.ImageLogo
{
text-indent: 25px;
 font-style: oblique;
 color: navy;
 font-weight: bold;
 font-family: arial;
 font-size: 28px;
 background-image:url('sunriseSmall.gif');
 background-repeat: no-repeat;
 background-color: white;
 height:80px;
 }

</style>

Then, include it on your page - again using the DIV tag:

<div class="ImageLogo">
<span style="font-size:14px;"> <br></span>
<p>SunRise Coffee<br>
<span style="font-size:18px; color:maroon;
  line-height:14px; font-weight:normal;">
<br>Shade-grown coffee ground fresh daily</span>
</div>

In this case, we used white as a background color, but you may want to choose a different color that will complement the rest of your site's color choices. Even if visitors are surfing using a graphical browser, there's always the chance that the background image may not load. Just in case, be safe and choose a complementary background color that works well with both the background image and the text.

Note how we use the SPAN tag first to place the company's name on the logo. Then, another SPAN tag reduces the size of the tagline text and changes the alignment. That gives the tagline a different "look" than the theater's name.

There's no "best" way to accomplish this! It's always dependent on your site's individual name, logo, layout, and look and feel. Get ready to spend some time experimenting and testing in different browsers to achieve the best effect.

Here's an example page that shows various ways to use these techniques. View the page's source code to see exactly how we achieved the desired effects.

Do Thorough Browser Testing

Be extremely careful with this technique. Your site logo is one of the major branding tools for your site. Make sure the logo will still look ok if the background image fails to load. Choose your fonts carefully: if visitors don't have the required font installed, their browser will use its default font instead.

And be sure to test the page in multiple browsers! Here's how the logo with the background image appears in different browser versions. Amazingly, it even looks decent in Netscape 4.7!
maiquang
maiquang
Forumember

Male Posts : 199
Reputation : 0
Language : VN
Location : HN

Back to top Go down

Solved Re: Logo link

Post by Gäst November 27th 2010, 2:13 pm

Solved
avatar
Gäst
Guest


Back to top Go down

Solved Re: Logo link

Post by MrMario November 27th 2010, 5:33 pm

Solved => Locked
MrMario
MrMario
Helper
Helper

Male Posts : 22186
Reputation : 1839
Language : test

Back to top Go down

Back to top

- Similar topics

The forum of the forums :: Miscellaneous :: Garbage

 
Permissions in this forum:
You cannot reply to topics in this forum