XOOPS 
Forum
Forum Index General Forums Community Support Modules Support Themes Support Development International Support Module Hack Reviews Theme Designer Talk
  1. Board index / 
  2. XOOPS Themes and Templates Support forums / 
  3. Theme stylesheets (CSS) help 
  4.  / CSS problem, borders around pictures
Register
1
falke
CSS problem, borders around pictures

  • 2004/12/2 9:10

  • falke

  • Friend of XOOPS

  • Posts: 158

  • Since: 2004/4/25


I have been evaluating a couple of article oriented modules lately. I need to be able to upload text and images from a PocketPc with just GSM GPRS on a bicycle trip trough europe, so I cant do a lot of image editing on the PocketPc.

Now my problems is that all of these modules wrap the text to close to the images, so that it looks very amateurish.....

Over at the AMS forum I was told that this is best solved with CSS and themes. I have checked lots of themes but none of them seems to solve this problem.

Can someone please direct me to a theme (CSS) that gives you some kind of borders around images or give me some kind of hint where to find a way to solve this.

regards/falke
2
JasonMR
Re: CSS problem, borders around pictures

  • 2004/12/2 9:58

  • JasonMR

  • Just can't stay away

  • Posts: 655

  • Since: 2004/6/21


In your root folder you will find a file called xoops.css, in it you will find the following line:

img {border: 0;}


...change this to:

img {border: 0; margin: 10px;}


...and see how you go, though you migh want to reduce the spacing...hope this helps...
3
falke
Re: CSS problem, borders around pictures

  • 2004/12/2 10:31

  • falke

  • Friend of XOOPS

  • Posts: 158

  • Since: 2004/4/25


Thank you Jason for this tip, but it does not seem to work

Take a look at this page


cykeltur.se

and look at the first image of Marathon tires and how the text touches the image.

regards/falke
4
rowdie
Re: CSS problem, borders around pictures

  • 2004/12/2 10:35

  • rowdie

  • Just can't stay away

  • Posts: 846

  • Since: 2004/7/21


Try changing your css again as JasonMR suggested. Your css for that image seems to be empty. It should be as Jason posted for it to work. Check the xoops.css file again.

Rowd
5
m0nty
Re: CSS problem, borders around pictures

  • 2004/12/2 10:38

  • m0nty

  • XOOPS is my life!

  • Posts: 3337

  • Since: 2003/10/24


try adding padding: 3px; to the img class aswell.. altho u may want to turn the borders off then..
6
falke
Re: CSS problem, borders around pictures

  • 2004/12/2 10:47

  • falke

  • Friend of XOOPS

  • Posts: 158

  • Since: 2004/4/25


This is what the xoops.css looks like:
Where do I add "padding: 3px; to the img class"
regards/falke

img {border: 10;}

#xoopsHiddenText {visibility: hidden; color: #000000; font-weight: normal; font-style: normal; text-decoration: none;}

.pagneutral {font-size: 10px; width: 16px; height: 19px;text-align: center; background-image: url(./images/pagneutral.gif);}
.pagact {font-size: 10px; width: 16px; height: 19px;text-align: center; background-image: url(./images/pagact.gif);}
.paginact {font-size: 10px; width: 16px; height: 19px;text-align: center; background-image: url(./images/paginact.gif);}


#mainmenu a {text-align:left; display: block; margin: 0; padding: 4px;}
#mainmenu a.menuTop {padding-left: 3px;}
#mainmenu a.menuMain {padding-left: 3px;}
#mainmenu a.menuSub {padding-left: 9px;}

#usermenu a {text-align:left; display: block; margin: 0; padding: 4px;}
#usermenu a.menuTop {}
#usermenu a.highlight {color: #0000ff; background-color: #fcc;
7
m0nty
Re: CSS problem, borders around pictures

  • 2004/12/2 11:01

  • m0nty

  • XOOPS is my life!

  • Posts: 3337

  • Since: 2003/10/24


you would add it here:

img {border: 10;}

add the style to it between the {} seperating each with a ;

so to add Jasons idea, you would do it like:

img {border: 0; margin: 10px;}

or to add the padding:

img {border: 0; margin: 10px; padding: 3px;}

just play abt with them till u get it looking somewhat..

incidentally, when setting it for a fixed pixel width.. u need to make sure the number is followed by px

ie. i see yours as being:

img {border: 10;} this should be img {border: 10px;} the px is not necessary if u set border to 0 as basically thats telling the browser to disable the border..
8
brash
Re: CSS problem, borders around pictures

  • 2004/12/2 11:07

  • brash

  • Friend of XOOPS

  • Posts: 2206

  • Since: 2003/4/10


This is not going to work is it, as wouldn't just setting a padding/margin value on the img element just then apply that to all images in the theme? I would've thought that this padding/margin value needs to be applied specifically to only images in the itemBody element?
9
falke
Re: CSS problem, borders around pictures

  • 2004/12/2 11:09

  • falke

  • Friend of XOOPS

  • Posts: 158

  • Since: 2004/4/25


Yesssssss, that worked!!! Thanks mates!

I do not really understand the difference between border, margin and padding.

Do yo mind explaining it to me or maybe point me to a webpage where I can read about it.

Thanks a lot!
regards/falke
10
m0nty
Re: CSS problem, borders around pictures

  • 2004/12/2 11:13

  • m0nty

  • XOOPS is my life!

  • Posts: 3337

  • Since: 2003/10/24


i think a good site i use a lot is: http://www.w3schools.com
(1) 2 3 »

Login

Register now!  |  Lost Password?

Search

Advanced Search

Recent Posts

Who's Online

163 user(s) are online (122 user(s) are browsing Support Forums)

Members: 0

Guests: 163

more...

Donat-O-Meter

Stats
Goal: $100.00
Due Date: Jan 31
Gross Amount: $0.00
Net Balance: $0.00
Left to go: $100.00
Make donations with PayPal!

Latest GitHub Commits