The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

CSS help for quotes

View previous topic View next topic Go down

Solved CSS help for quotes

Post by iamthestreets on December 12th 2011, 8:56 pm

I'm having trouble putting the quotation mark and the original person who wrote the quote into the quote box just like when you quote someone on this help forum. Can someone please show me how to do this?



Here is the code I'm using:
Code:
.quote {
        font-style:italic,Verdana,Arial,Helvetica,sans-serif;
        border-width: 2px;
        background-image: url("http://i43.servimg.com/u/f43/16/73/76/02/quoteb11.png");
        border-left: 4px solid grey;
        border-top-left-radius:    0px;
        border-top-right-radius:    25px;
        border-bottom-right-radius: 25px;
        border-bottom-left-radius:  6px;
        padding-left: 20px;
        padding-top: 15px;
        padding-bottom: 15px;
        padding-right: 20px
        }
Code:
div.postbody span.genmed {
        color:white;
        background-image: url("http://i43.servimg.com/u/f43/16/73/76/02/quote111.png");
        background-repeat:no-repeat;
        padding-top:0px;
        padding-bottom:0px;
        padding-right:0px;
        padding-left:20px;
        }

iamthestreets
Forumember

Posts : 114
Reputation : 1
Language : English

http://www.mystreetlife.forumotion.com/

Back to top Go down

Solved Re: CSS help for quotes

Post by Guest on December 12th 2011, 9:20 pm

I don't understand what you want. You'll gave the codes for quotes, for with what I can help you? Sorry, I really don't understanded. Very Happy

Guest
Guest


Back to top Go down

Solved Re: CSS help for quotes

Post by iamthestreets on December 12th 2011, 10:16 pm

If you look at the first image i want to make it look like this... You will notice how the quotes and iamthestreet|A is inside the same box as the text.


iamthestreets
Forumember

Posts : 114
Reputation : 1
Language : English

http://www.mystreetlife.forumotion.com/

Back to top Go down

Solved Re: CSS help for quotes

Post by ankillien on December 13th 2011, 6:50 am

Hi,

Can you give link to your forum please?

ankillien
Energetic

Posts : 5198
Reputation : 129
Language : English, XHTML, CSS, JS, PHP, SQL

http://www.webartzforum.com/

Back to top Go down

Solved Re: CSS help for quotes

Post by iamthestreets on December 13th 2011, 2:28 pm

@ankillien wrote:Hi,

Can you give link to your forum please?

I want it to look just like the quote above with my own style.

http://www.mystreetlife.com/

iamthestreets
Forumember

Posts : 114
Reputation : 1
Language : English

http://www.mystreetlife.forumotion.com/

Back to top Go down

Solved Re: CSS help for quotes

Post by ankillien on December 14th 2011, 5:14 am

Thanks for the link.

Try this code...

Code:
$(function(){

$('.quote').parent().parent().parent().css({
  'background-image': 'url(http://i43.servimg.com/u/f43/16/73/76/02/quoteb11.png)',
  'border-left': '2px solid grey',
  'border-radius': '0 25px 25px 6px',
  'border-width': '2px',
  'padding': '15px 20px'
});

$('.quote').css({
  'background': 'none',
  'border': 'none',
  'padding': '0px',
  'border-radius': '0px'
});

});

Add it via Admin CP > Modules > Javascript management for 'In the topics' option.

Hope it helps Very Happy

ankillien
Energetic

Posts : 5198
Reputation : 129
Language : English, XHTML, CSS, JS, PHP, SQL

http://www.webartzforum.com/

Back to top Go down

Solved Re: CSS help for quotes

Post by iamthestreets on December 14th 2011, 9:27 pm

That worked perfectly. Thanks for all the help.

I had a friend of mine help me with some of the javascript to add a few things. so here it is for those that will need help with this in the future.

Code:
$(function(){
       
        $('.quote').parent().parent().parent().css({
          'background-image': 'url(http://i43.servimg.com/u/f43/16/73/76/02/quoteb14.png)',
          'border-left': '2px solid grey',         
          'border-radius': '0 25px 25px 6px',
          'border-width': '2px',
          'padding': '10px 15px'
          });
       
        //save quote text
        var quoteText = $('.quote').html();
       
        //clear out inside of quote td cell
        $('.quote').html("");
       
        //add div to quote class
        var $insideDiv = $('<div class="insideQuote"/>');
        $insideDiv.html(quoteText );
        $('.quote').append($insideDiv);

        //move text into new tag
        $('.insideQuote').css({
          'background': 'none',         
          'padding-left': '10px',         
          'padding-top': '0px',
          'border-radius': '0px',
          'margin-left': '30px',
          'border-left': '2px solid grey'     
          });
          });

End results:

iamthestreets
Forumember

Posts : 114
Reputation : 1
Language : English

http://www.mystreetlife.forumotion.com/

Back to top Go down

Solved Re: CSS help for quotes

Post by Jophy on December 14th 2011, 11:52 pm

Topic Solved & Moved

Note: You can also help the staff member's work by EDITING your topic and marking it as solved.

Jophy
ForumGuru

Male Posts : 17924
Reputation : 835
Language : English
Location : Somewhere

Back to top Go down

View previous topic View next topic Back to top


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