Help - Borders, Boxes - Be Gone!

[Mercyblues]

Hi...

I'm fairly new to Dgrin and definitely new to customizing websites! I could use some advice and suggestions on how to fix a few things on my site and also an explanation about how I turn the customization into a theme.

My site is - www.scarletirisphoto.com (http://www.scarletirisphoto.com)

The issues I need help on are as follows:

1. I was successful in getting a custom background graphic on all of my pages, however I'm not getting the seamless look that I want and figure it has something to do with the CSS code or the actual design of the background.

2. I would like to remove all the solid boxes that are part of the original theme I chose. I'm not sure how to make these go away. Any suggestions?

Thanks for any help you can provide!

:scratch Mare

[jfriend]

On the first question, it would help if you describe what the more "seamless look" would be and what you want it to look like.

For the second question, you can use this CSS to get rid of the border from your theme in most places:

.box {border:none !important;}

[Mercyblues]

On the first question, it would help if you describe what the more "seamless look" would be and what you want it to look like.

For the second question, you can use this CSS to get rid of the border from your theme in most places:

.box {border:none !important;}

Thanks John for your help...I'll give this a shot later this evening.

As far as the background being seamless...if you look at it you can see the seam lines where the background repeats....It's not horribly noticeable with the big red boxes in place, but once they're removed I think it will be. Any suggestions?

[ssimmonsphoto]

Thanks John for your help...I'll give this a shot later this evening.

As far as the background being seamless...if you look at it you can see the seam lines where the background repeats....It's not horribly noticeable with the big red boxes in place, but once they're removed I think it will be. Any suggestions?

I would try to make the background bigger and the size of 4 background tiles combined. So, open on up in PS and then double the width and height of the canvas. Then copy the first tile, flip it horizontally, line it up. Then copy those two tiles together and flip them vertically and then line it up. Make sense? Then upload that and replace your current background with it. That should, I think, help make it better.

[jfriend]

Thanks John for your help...I'll give this a shot later this evening.

As far as the background being seamless...if you look at it you can see the seam lines where the background repeats....It's not horribly noticeable with the big red boxes in place, but once they're removed I think it will be. Any suggestions? In case you didn't realize, there is a unique characteristic of a background square that can be tiled without seams. The left side matches the right side and the top matches the bottom. You have to have a unique pattern and close attention to how the edges work in order to make it seamless. It's nothing to do with your CSS - it's purely a function of your background image having this unique property. SSimons described how you would make such an image from the starting point that you have.

[Mercyblues]

On the first question, it would help if you describe what the more "seamless look" would be and what you want it to look like.

For the second question, you can use this CSS to get rid of the border from your theme in most places:

.box {border:none !important;}


Okay...one issue down - one to go...

John - I hate to be such a pest, but where exactly does the above code belong...I've apparently lost something in the translation!

:help & Thanks Again - Mare

[Mercyblues]

I would try to make the background bigger and the size of 4 background tiles combined. So, open on up in PS and then double the width and height of the canvas. Then copy the first tile, flip it horizontally, line it up. Then copy those two tiles together and flip them vertically and then line it up. Make sense? Then upload that and replace your current background with it. That should, I think, help make it better.

Thanks for the help on this - with a combination of your wisdom and that of another web savvy friend I was able to get this issue resolved! :ivar

Thanks! - Mare

[Mercyblues]

I am making progress on my site customization but I'm still having issues with Boxes and Borders.

www.scarletirisphoto.com (http://www.scarletirisphoto.com)

1. I want to remove the white border that appears at the top and left of all boxes on my site. JFriend suggested that this .box {border:none !important;} solve the problem but when I added this to my CSS code there was no change - perhaps I'm not placing it correctly within my CSS box, I'm not sure.

2. I would really like to eliminate the black box around my slide show, so that essentially the photos float on the custom background - is this possible?

Any help would be appreciated!

:scratch
Mare

[jfriend]

First, you've got a lot of extra stuff in your bio, including duplicate slideshows. Please replace everything you have in your bio with this:

<html>
<div id="bioText">Scarlet Iris Photography</div>
<center>
<script>
var ssConfig = {
AlbumID: '6721382',
newWindow: 'false',
transparent: 'true',
splash: 'http://www.scarletirisphoto.com/photos/350618802_EPo2V-S.png',
borderThickness: '5',
borderColor: '9c1515',
showLogo: 'false',
clickUrl: 'http://www.scarletirisphoto.com',
showThumbs: 'false',
showButtons: 'false',
crossFadeSpeed: '350'
};

SM.flash.insertSlideshow(600, 600, ssConfig, 'transparent');
</script>
</center>
</html>



Then, you need to fix some errors in your custom CSS in your site-wide-customization:

Remove this:
// fix the pesky pipes

YE.onAvailable("cobrand_footer", function() {this.innerHTML = this.innerHTML.replace(/\||what are feeds\?/gi, '');});

This is javascript. If you want to use it, it belongs in your Bottom Javascript, not in your CSS.



Then, none of these are doing anything because the XXXXXX would have to be replaced with real gallery IDs to do anything:

.gallery_XXXXXXX #breadcrumb {visibility: hidden;}
.gallery_XXXXXXX .loggedIn #breadcrumb {visibility: visible;}

.gallery_XXXXXXX #breadcrumb {visibility: hidden;}
.gallery_XXXXXXX .loggedIn #breadcrumb {visibility: visible;}

.gallery_XXXXXXX #breadcrumb {visibility: hidden;}
.gallery_XXXXXXX .loggedIn #breadcrumb {visibility: visible;}

.gallery_XXXXXXX #breadcrumb {visibility: hidden;}
.gallery_XXXXXXX .loggedIn #breadcrumb {visibility: visible;}

.gallery_XXXXXXX #breadcrumb {visibility: hidden;}
.gallery_XXXXXXX .loggedIn #breadcrumb {visibility: visible;}

.gallery_XXXXXXX #breadcrumb {visibility: hidden;}
.gallery_XXXXXXX .loggedIn #breadcrumb {visibility: visible;}

.gallery_XXXXXXX #breadcrumb {visibility: hidden;}
.gallery_XXXXXXX .loggedIn #breadcrumb {visibility: visible;}

.gallery_XXXXXXX #breadcrumb {visibility: hidden;}
.gallery_XXXXXXX .loggedIn #breadcrumb {visibility: visible;}

.gallery_XXXXXXX #breadcrumb {visibility: hidden;}
.gallery_XXXXXXX .loggedIn #breadcrumb {visibility: visible;}

.gallery_XXXXXXX #breadcrumb {visibility: hidden;}
.gallery_XXXXXXX .loggedIn #breadcrumb {visibility: visible;}


Then, add this to the box labeled CSS in your site-wide-customization to remove the black background and the borders from your homepage:

#bioBox.box, #bioBox .boxTop, #bioBox .boxBottom, .box {border:none !important;}
#bioBox, #bioBox.box, #bioBox .boxTop, #bioBox .boxBottom {background:none !important;}

In the future, if you're asking about the same topic that you've been previously discussing try to respond to the same thread that you got your previous help in rather than creating a new thread. That way, we can keep the same conversation going. I can see what I told you last time and what has already been tried. Others who want to help can see the road we've already traveled, etc...

[Allen]

I merged the threads so Mercyblues can see his history of changes.

[Mercyblues]

John - Thank you so much for all your help - being new to CSS coding, a lot of what I've done has been trial and error (apparently more error!) - I really appreciate you sharing your knowledge!

With regard to the breadcrumb section of the CSS containing the XXXXXXX - I will be adding the gallery ID's so that this has a purpose.

Al - Thanks for combining my posts - though I did originally post part of these questions to my original post - they went unanswered so I mistakenly thought that starting a separate thread made more sense - I promise to behave myself from now on :bow

Off to make the changes!

Thanks again!
Mare

[Mercyblues]

John - one more question...well at least I hope it's only one more, I've almost got it where I want it!

The code you supplied worked brilliantly to remove the black box and border from my slide show. I also wanted to remove the white borders and (possibly the black boxes) from the Galleries Category box, as well as the white borders that appear on my gallery pages - assuming that the same basic code that removed the borders/boxes from my slide show would do this for the other boxes - how do I determine what replaces the #bioBox portion of the code to achieve what I want?

I think if you can guide with that portion I'll be able to take care of the rest myself!

Thanks again!
Mare1

[jfriend]

John - one more question...well at least I hope it's only one more, I've almost got it where I want it!

The code you supplied worked brilliantly to remove the black box and border from my slide show. I also wanted to remove the white borders and (possibly the black boxes) from the Galleries Category box, as well as the white borders that appear on my gallery pages - assuming that the same basic code that removed the borders/boxes from my slide show would do this for the other boxes - how do I determine what replaces the #bioBox portion of the code to achieve what I want?

I think if you can guide with that portion I'll be able to take care of the rest myself!

Thanks again!
Mare1

If you want the background and border gone everywhere, add these additional lines of CSS:

.box, .boxTop, .boxBottom {background:none !important; border:none !important;}
.galleryPage {border:none !important;}

The second line gets rid of the border in your galleries (I didn't know if you wanted that or not).

[Mercyblues]

John - You Rock!

Thanks SO MUCH!:barb:clap:bow