OptimizePress users should be doing this (but I can't figure out how)

11 replies
  • WEB DESIGN
  • |
Hey guys,

I have OP and I'm using it on a few sites now.
I'm also considering moving my largest site from Thesis to OP.
I want the beautiful squeeze pages and shortcode stuff.

BUT - I want to bring in my own custom CSS code for things like testimonial boxes. I already have great, beautiful code that my programmer did for Thesis. I've tried porting it to the custom CSS area in OptimizePress, but it's not working for me.

Who has experience in using OptimizePress and using custom CSS? It should be a really easy way to customize our sites and add a special flare to them, and it should be easy. But for me it's not.

I'll probably hire someone on oDesk for this. But I thought I'd check here first to see what others have done.
#figure #optimizepress #users
  • Profile picture of the author JustinSch
    Hi Chris,

    Did you try adding your modified code to the bottom of your style.css in Appearance > Editor?

    - Justin
    {{ DiscussionBoard.errors[5917854].message }}
  • Profile picture of the author tknoppe
    Also make sure when you add the testimonial area to your page, that you are calling in the CSS class for that that uses the code you added to the stylesheet.
    Signature

    Traci Knoppe, OBM, Launch & Project Manager
    Your Web Tech Team

    {{ DiscussionBoard.errors[5918109].message }}
  • Profile picture of the author Chris Thompson
    Traci - yes, of I'm calling up the code by using the exact same HTML that I am using on my live site now.

    The CSS from Thesis starts with .custom, which is thesis-specific. So I removed that part of the code.

    The code now looks like what's shown below. I moved over the images also, making sure they're in the correct spot.

    .testimonial_holder{background:transparent url(images/testimonial_new_top.png) no-repeat;width:523px;padding-top:30px;margin:10px auto;}

    .testimonial_holder h3{margin-top:11px;margin-bottom:10px;text-align:center;}

    .testimonial_middle{background:transparent url(images/testimonial_new_mid.png) repeat-y;width:443px;margin-top:-1px;padding:0 40px 5px 40px;}
    .testimonial_bottom{background:transparent url(images/testimonial_new_bot.png) no-repeat;width:523px;height:32px;}
    Justin - there are several CSS files with Thesis, and I've got no idea which one it should get added to. I prefer to add the CSS using the field provided if I can get it to work. That way I don't feel like I'm hacking the theme (easier to maintain).
    {{ DiscussionBoard.errors[5918429].message }}
  • Profile picture of the author JustinSch
    Chris, sending you a PM.
    {{ DiscussionBoard.errors[5918580].message }}
  • Profile picture of the author Chris Thompson
    I got it to work!
    (Justin - thanks for your PM)

    Turns out the custom CSS was working but the image path was not working. It should be. The regular CSS with the theme uses a path like "/images/filename.png"

    So I used the same path and copied my images to that folder.
    No go.

    Today I tried putting a full URL instead of a relative path. Worked!

    No idea why, and it is a pain in the ass because migrating from my test site to a live site means I have to change the URLs.
    {{ DiscussionBoard.errors[5922970].message }}
  • Profile picture of the author Istvan Horvath
    Chris,

    Are the regular CSS and the custom CSS files in the same folder? My suspicion is they are not, that's why the same relative path didn't work.

    If you can locate the custom CSS file and figure out the relative path to the image folder... that should work.
    Signature

    {{ DiscussionBoard.errors[5923456].message }}
  • Profile picture of the author Chris Thompson
    Hi Istvan,

    Makes perfect sense. With OptimizePress the custom CSS gets pasted into a text field in the WordPress admin area, so I suppose that should save the text to a file somewhere, right? I'll take a look.
    {{ DiscussionBoard.errors[5924082].message }}
    • Profile picture of the author Istvan Horvath
      Originally Posted by Chris Thompson View Post

      With OptimizePress the custom CSS gets pasted into a text field in the WordPress admin area, so I suppose that should save the text to a file somewhere, right?
      Maybe yes, maybe not.

      I mean it could, easily be saved as "data" in the database (as it happens with your general blog settings and a lot of themes/plugins settings).
      Nevertheless, even in this case for HTML output (what you see in the browser) it has to be retrieved and 'inserted' into a file - so you need the location of where it appears during the output. Then calculate the path to the images folder from there.

      On the other hand, it could be inserted in a "writable" file, too - and in this case you need to find the location of this file.

      Sorry, I am just guessing, since I am not familiar with the theme.
      Signature

      {{ DiscussionBoard.errors[5924755].message }}
  • Profile picture of the author Chris Thompson
    FYI I submitted a ticket to OptimizePress and they're trying to answer my question about where custom CSS lies in the code. Strangely, they asked for wordpress and FTP access. Shouldn't they have a dummy setup to play with

    The theme is great, but the documentation is a disaster.
    {{ DiscussionBoard.errors[5934088].message }}
  • Profile picture of the author EL Jefe
    Good info. Thanks!!!! I just got OP \m/
    {{ DiscussionBoard.errors[5934101].message }}
  • Profile picture of the author Chris Thompson
    Hey guys - OK this issue is solved.

    OptimizePress support tells me that when you use images in custom CSS you must declare the absolute path of the image. Their reasoning is that different people use different HTAccess (something like that) so relative paths may not always be the same.

    Whatever. No big deal. Nice to know they want absolute paths for all image files. Now my beautiful testimonial boxes work nicely. All is good.
    {{ DiscussionBoard.errors[5941014].message }}

Trending Topics