Skip to main content
S
SabrinaStar
Participating Frequently
March 7, 2018
Answered

Wordpress Website Looks Great in Live Preview, but....

  • March 7, 2018
  • 4 replies
  • 773 views

I have a wordpress website/theme that I'm editing in Dreamweaver. I keep making changes to the css that look great in the Live Preview window of dreamweaver, but when I look in the browser; it appears completely different. What could be the cause of this? It's not a cache issue; I've already checked that.

This topic has been closed for replies.
Correct answer B i r n o u

as I can see you just edit the main template CSS... you really should use a child template... it's easy to set up and it will avoid any trouble... later...

sorry I'm Franch so the links goes to a translator.. let me know if that help you...

so first of all as you must already probably have , you need a sand box to test

https://translate.google.com/translate?sl=fr&tl=en&js=y&prev=_t&hl=fr&ie=UTF-8&u=http%3A%2F%2Fwww.puce-et-media.com%2Fcr…

then you can use the child template

https://translate.google.com/translate?sl=fr&tl=en&js=y&prev=_t&hl=fr&ie=UTF-8&u=http%3A%2F%2Fwww.puce-et-media.com%2Fcr…

depending on the thme and the needs you probably will need to manage dependencies... so have a look here

https://translate.google.com/translate?hl=fr&sl=fr&tl=en&u=http%3A%2F%2Fwww.puce-et-media.com%2Fchild-theme-gerer-les-de…

if you need to go further with your child template... further than CSS

https://translate.google.com/translate?hl=fr&sl=fr&tl=en&u=http%3A%2F%2Fwww.puce-et-media.com%2Faller-plus-loin-avec-un-…

then once everything is done in the sandbox, the major problem become to transfert all these data (made in WP, not in the child template)... as menu, trees, articles, portfolio... in fact local DataBase... so

https://translate.google.com/translate?hl=fr&sl=fr&tl=en&u=http%3A%2F%2Fwww.puce-et-media.com%2Ftransferer-son-site-loca…

let me know if that helps you... because to answer to your initila question, if everything is set correctly (in DW website setting) and in your local computer stack localhost (Xampp, mamp, easyPHP, wamp, ... lamp...) there shouldn't be any difference...

4 replies

S
SabrinaStarAuthor
Participating Frequently
March 8, 2018

As a quick fix, I used the wordpress option to "add additional css" and just C&P the css that wasn't working. It's not the "right" way, but it worked, so I'm happy

S
SabrinaStarAuthor
Participating Frequently
March 7, 2018

If it helps, here is the code for my index page:

<?php get_header(); ?>

<main class="main">

<h1>What's New?</h1>

<?php query_posts(array('category_name' => 'news' , 'posts_per_page' => 3));

while (have_posts()) : the_post();

  ?>

    <h2><font color="#01a7bd" size="4">

  <?php 

  the_date();

    echo '</font></h2>';

the_content();

echo "<br>";

endwhile;

?>

     

</main>

<?php get_footer(); ?>

And here is my header-- where the css is contained:

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/style.css" type="text/css" charset="utf-8" />

<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/audioplayer.css" type="text/css" charset="utf-8" />

<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->

<script>var __adobewebfontsappname__="dreamweaver"</script>

<link rel="icon"

      type="image/png"

      href="<?php bloginfo('template_url'); ?>/images/sabrinafavicon.png">

<script src="http://use.edgefonts.net/architects-daughter:n4:default.js" type="text/javascript"></script>

<?php wp_head(); ?>

</head>

<body <?php body_class(); ?>>

<div class="header" id="header"><center><img src="<?php the_field('change_logo', 'option'); ?>" width="70%" alt=""/></center></div><br>

<center>

<a href="<?php the_field('facebook', 'option'); ?>" target="_blank"><img src="<?php bloginfo('template_url'); ?>/images/Facebook.png" width="40" height="40" alt=""/></a>  

     

      <a href="<?php the_field('twitter', 'option'); ?>" target="_blank"><img src="<?php bloginfo('template_url'); ?>/images/Twitter.png" width="40" height="40" alt=""/></a>  

     

        <a href="<?php the_field('instagram', 'option'); ?>" target="_blank"><img src="<?php bloginfo('template_url'); ?>/images/Instagram.png" width="40" height="40" alt=""/></a>  

     

         <a href="<?php the_field('youtube', 'option'); ?>" target="_blank"> <img src="<?php bloginfo('template_url'); ?>/images/youtube.png" width="40" height="40" alt=""/></a>

</center><br>

<div class="navigation" id="navigation">

<nav class="cmn-tile-nav">

<?php wp_nav_menu (array('theme_location'=>'main_menu','menu_class'=>'clearfix'));?>

     

    </nav></div>

<!-- js -->

<script src="<?php bloginfo('template_url'); ?>/js/classie.js"></script>

<script src="<?php bloginfo('template_url'); ?>/js/demo.js"></script>

B i r n o u
B i r n o uCorrect answer
Legend
March 8, 2018

as I can see you just edit the main template CSS... you really should use a child template... it's easy to set up and it will avoid any trouble... later...

sorry I'm Franch so the links goes to a translator.. let me know if that help you...

so first of all as you must already probably have , you need a sand box to test

https://translate.google.com/translate?sl=fr&tl=en&js=y&prev=_t&hl=fr&ie=UTF-8&u=http%3A%2F%2Fwww.puce-et-media.com%2Fcr…

then you can use the child template

https://translate.google.com/translate?sl=fr&tl=en&js=y&prev=_t&hl=fr&ie=UTF-8&u=http%3A%2F%2Fwww.puce-et-media.com%2Fcr…

depending on the thme and the needs you probably will need to manage dependencies... so have a look here

https://translate.google.com/translate?hl=fr&sl=fr&tl=en&u=http%3A%2F%2Fwww.puce-et-media.com%2Fchild-theme-gerer-les-de…

if you need to go further with your child template... further than CSS

https://translate.google.com/translate?hl=fr&sl=fr&tl=en&u=http%3A%2F%2Fwww.puce-et-media.com%2Faller-plus-loin-avec-un-…

then once everything is done in the sandbox, the major problem become to transfert all these data (made in WP, not in the child template)... as menu, trees, articles, portfolio... in fact local DataBase... so

https://translate.google.com/translate?hl=fr&sl=fr&tl=en&u=http%3A%2F%2Fwww.puce-et-media.com%2Ftransferer-son-site-loca…

let me know if that helps you... because to answer to your initila question, if everything is set correctly (in DW website setting) and in your local computer stack localhost (Xampp, mamp, easyPHP, wamp, ... lamp...) there shouldn't be any difference...

B i r n o u
B i r n o u
Legend
March 7, 2018

without link or code... it's difficult to get an idea ?...

in an other hand could you place a screen grab from both... live view and external real browser

S
SabrinaStarAuthor
Participating Frequently
March 7, 2018

Sure-

So it's not on a live site yet, otherwise I would definitely show you.

But here's the main differences between the live view (first) and the browser (second)

It appears to be an issue with the CSS, but I don't understand why it would show what I want in the live preview and not in the actual website.

Jon Fritz
Community Expert
Jon FritzCommunity Expert
Community Expert
March 7, 2018

It could just be a glitch of the new(ish) Live Preview.

What does it look like when you use Open in Browser instead?

Right click the file in the Files window, or right click the named tab of the document (if your documents are set as tabs) and choose "Open in Browser" instead.

If it looks right when using the localhost address in Open in Browser, vs Adobe's shell IP address in Live Preview, it's very likely perfectly fine and you've stumbled upon a shortcoming of the Live Preview function.

Oops, read that too fast.

Are you talking about "Live Preview (F12) and then an uploaded file in the server in the browser" not working, or "DW's Live View (side by side with code) then Live Preview (F12)" showing something different?

(Live View, Live Preview and Open in Browser/Preview in Browser are all different things)

S
SabrinaStarAuthor
Participating Frequently
March 7, 2018

Hi Jon,

I'm not totally sure I understand your question.

It looks exactly the way I want in Live Preview; but the CSS is somehow not applied properly when I look in the browser.

Jon Fritz
Community Expert
Jon FritzCommunity Expert
Community Expert
March 7, 2018

I think we're getting some terminology goofed up here...

Live Preview = New F12 function in CC2017 and newer that uses Adobe's servers to show your page in a chosen browser

Live View = Side by side view with Code within Dreamweaver (no browser involved)

Preview in Browser = Old preview function using browsers to test local files, now called Open in Browser in CC2017 and newer

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices