RocketTheme - TOPIC: how do i layer text over a png in a custom module (1/2)

Welcome Guest! Login

0 items Join Now

- adamcostantin2
- Jr. Rocketeer
- Posts: 45
- Thanks: 0
- Designer
how do i layer text over a png in a custom module

Posted 14 years 4 days ago
- Hello,
  
  I am looking to create a cutsom module that will act as a kinda button. I have designed png images but need to layer text over it so its nice and searchable for Google.
  At the moment the image sits above the text that I add. I also would like to change the rollover colour of the button to fit with site design.
  
  Can anyone help?
  
  Here is a link to the site usbflashdrivesdirect.co.uk
  
  I have attached an image which is a mock up in photoshop of what I am trying to acheive.
  This image is hidden for guests.
  Please log in or register to see it.
#654254
- Henning
- Preeminent Rocketeer
- Posts: 29362
- Thanks: 954
- Volunteer
Re: how do i layer text over a png in a custom module

Posted 14 years 4 days ago
- perhaps you want use one of the common image replacement techniques:
  css-tricks.com/css-image-replacement/
#654289
- adamcostantin2
- Jr. Rocketeer
- Posts: 45
- Thanks: 0
- Designer
Re: how do i layer text over a png in a custom module

Posted 14 years 4 days ago
- Hi
  
  I read up on yr link and it seems to replace and element for an image?What i want is to simple put text over a image...Could this be done by makling the image background of the module or something?
  
  thanks
#654320
- Henning
- Preeminent Rocketeer
- Posts: 29362
- Thanks: 954
- Volunteer
Re: how do i layer text over a png in a custom module

Posted 14 years 4 days ago
- you could place you text + button into a div ... and give that div a background image via css.
  after that you you move the elements in the div around via position: relative
  
  The div needs to have dimensions and position: relative too for that.
  
  Perhaps this helps:
  www.barelyfitz.com/screencast/html-training/css/positioning/
#654325
- adamcostantin2
- Jr. Rocketeer
- Posts: 45
- Thanks: 0
- Designer
Re: how do i layer text over a png in a custom module

Posted 14 years 4 days ago
- My html codeing skills are very limited would you have an example of the type of code i would need for such a job.
  
  And is this still for the custom html module?
  
  Thanks for your quick replies.
  Adam
#654337
- Henning
- Preeminent Rocketeer
- Posts: 29362
- Thanks: 954
- Volunteer
Re: how do i layer text over a png in a custom module

Posted 14 years 4 days ago
- you could send me superadmin-pass/user ...
#654355
- Henning
- Preeminent Rocketeer
- Posts: 29362
- Thanks: 954
- Volunteer
Re: how do i layer text over a png in a custom module

Posted 14 years 3 days ago
- Clear your browser cache and see if the accessories does look better now.
  I added some code in the module and adde a few lines at the end of demo.css
  
  To add the code I disabled the text editor. I strongly recommend to use the RokPad editor.
#654662
- adamcostantin2
- Jr. Rocketeer
- Posts: 45
- Thanks: 0
- Designer
Re: how do i layer text over a png in a custom module

Posted 14 years 3 days ago
- Oh my god you have saved my day thanks so much...
  
  (rt-text-1) can I ask does this control the line spacing of the paragraph as it would be great to tighten the spacing.
  
  But thanks so much I really appreciate this.
  
  Adam
#654675
- Henning
- Preeminent Rocketeer
- Posts: 29362
- Thanks: 954
- Volunteer
Re: how do i layer text over a png in a custom module

Posted 14 years 3 days ago
- Hi Adam,
  
  I simplified the code a bit.
  Also check what I added to the demo.css-file.
#654824
- adamcostantin2
- Jr. Rocketeer
- Posts: 45
- Thanks: 0
- Designer
Re: how do i layer text over a png in a custom module

Posted 14 years 2 days ago
- Hi Henning,
  
  Thanks so much I only just noticed you installed the Favicon!haha Which PHP file did you add the code to?
  
  I would like to know for future reference.
  
  You have made my day thanks so much...Do you think it would be a really good idea for me to learn html via a course?I'm sure it would make custom modules much easier to produce.
  
  Adam
#655001