JoomlArt Forums 32,862 posts

[mfcphil Friend mfcphilJoin date: September 2007Posts: 2866Downloads:3Uploads:218 Thanks: 211 Thanked: 388 times in 133 posts]

#313523

<em>@anisjolly 139615 wrote:</em><blockquote>there should be a poll up shortly. MiCCAS is probably getting things sorted over the next couple of days

🙂

btw phil – i never told you that your site sucks 😛 – only kidding mate – your site is one of the best I’ve seen using joomla and it deserves to win!</blockquote>

I nearly fell off my stool, having read the first part of your post….thought you were still sore about the cup final!…..but then I read the rest…

Many Thanks….I love your new look site by the way!! and good look this season Bolton!! 😉

[mfcphil Friend mfcphilJoin date: September 2007Posts: 2866Downloads:3Uploads:218 Thanks: 211 Thanked: 388 times in 133 posts]

#313524

<em>@sunrise 139649 wrote:</em><blockquote>Well, the only way it sucks is that it makes mine not look so good.:(

:D:D</blockquote>

Very sure your site looks so cool!! 😉

[sbaldwin Friend sbaldwinJoin date: May 2008Posts: 342Downloads:0Uploads:65 Thanks: 119 Thanked: 15 times in 1 posts]

#313880

Great Job!!! If you don’t mind me asking, how did you get the dashes around the text? I have attached a screenshot of what I’m referring to, looks great! A client of mine just asked me to make “coupons ads” and this would be perfect for that. Did you do it in adobe photoshop?

Thanks for sharing!

---

Attachments:

1. 

1 user says Thank You to sbaldwin for this useful post

1. mfcphil

[mihirc Friend mihircJoin date: December 2008Posts: 597Downloads:0Uploads:3 Thanks: 62 Thanked: 95 times in 39 posts]

#313930

Hello Phil,

Probably a very late reply! But congrats mate, winning a competition is always good and you thoroughly deserve it. A very good looking and very dynamic looking website. We look forward for your future venture.

Between, when will the SOTM August start??? I want to submit my site 🙂

Regards,
Mihir Chhatre.

1 user says Thank You to mihirc for this useful post

1. mfcphil

[mfcphil Friend mfcphilJoin date: September 2007Posts: 2866Downloads:3Uploads:218 Thanks: 211 Thanked: 388 times in 133 posts]

#313950

<em>@sbaldwin 140237 wrote:</em><blockquote>Great Job!!! If you don’t mind me asking, how did you get the dashes around the text? I have attached a screenshot of what I’m referring to, looks great! A client of mine just asked me to make “coupons ads” and this would be perfect for that. Did you do it in adobe photoshop?

Thanks for sharing!</blockquote>

Quite easy really…..

Go to your template css and find your stickynote…..make a copy of it and change it to suit…..make new images if needed and uploade to your image folder…sticky-bg.png and change the hex colour to suit #F5FFFA and the border is simple enogh border: 3px dashed #CCCCCC;

Here is the one you have picked out

p.stickynote {

padding: 10px 0px 20px 50px;
color: #333333;
border: 3px dashed #CCCCCC;
background: url(../images/sticky-bg.png) no-repeat 5px 10px #F5FFFA;

}

I have made about a dozen different ones throughout the site with little differences, such as different images or different coloured backgrounds 😉

p.stickynote {

padding: 10px 0px 20px 50px;
color: #333333;
border: 3px dashed #CCCCCC;
background: url(../images/sticky-bg.png) no-repeat 5px 10px #F5FFFA;

}

p.stickynote2 {

padding: 10px 0px 20px 50px;
color: #333333;
border: 3px dashed #CCCCCC;
background: url(../images/sticky2-bg.png) no-repeat 5px 10px #FFDEAD;

}

p.stickynote3 {

padding: 10px 0px 20px 50px;
color: #333333;
border: 3px solid #CCCCCC;
background: url(../images/sticky3-bg.png) no-repeat 5px 10px #FFFFCC;

}

p.stickynote4 {

padding: 10px 0px 20px 50px;
color: #333333;
border: 3px dashed #CCCCCC;
background: url(../images/sticky4-bg.png) no-repeat 5px 10px #F0F8FF;

}

Sure you get the idea!! See here for the results

Need any more advice dont be affraid to ask

[sbaldwin Friend sbaldwinJoin date: May 2008Posts: 342Downloads:0Uploads:65 Thanks: 119 Thanked: 15 times in 1 posts]

#313961

mfcphil,
That is so cool! Now that’s genious how you thought of modifying your stickynote. That’s what I call customizing your template to your own liking! One thing I’m not sure of is how to get it into the article content. Sorry to ask, but when you say to make an image what do you mean by that? I’m assuming the “colored box” is actually and image to the size of box I need?

If I make image (do you have a sample of what part is the image) then I select that image when placing it into my article? For my client I’m thinking I’ll just need the “Dashes” around a text box.

THANKS! This is exactly what my client wants for her coupons page!

[mfcphil Friend mfcphilJoin date: September 2007Posts: 2866Downloads:3Uploads:218 Thanks: 211 Thanked: 388 times in 133 posts]

#313965

Here is my image

5640

Lets go through the code to make it easy for you to understand

p.stickynote {

padding: 10px 0px 20px 50px;
color: #333333;
border: 3px dashed #CCCCCC;
background: url(../images/sticky-bg.png) no-repeat 5px 10px #F5FFFA;

}

The border border: 3px dashed #CCCCCC; is dashed and the colour is cccccc which is silver/grey

The background: background: url(../images/sticky-bg.png) no-repeat 5px 10px #F5FFFA; the image is what we have placed in our image folder…the background colour is the hex number…in this case its #F5FFFA

I did a quick info on this in the css help section

http://www.joomlart.com/forums/topic/add-your-css-tips-here/

---

Attachments:

1. 

1 user says Thank You to mfcphil for this useful post

1. sbaldwin

[sbaldwin Friend sbaldwinJoin date: May 2008Posts: 342Downloads:0Uploads:65 Thanks: 119 Thanked: 15 times in 1 posts]

#314004

GREAT! I’ll try it out…thanks so much!

[Author]

Posts