By JoeyRoth on

hi

i added this code to comment.tpl.php 

      <p class="comment-name">
        <?php print render($content['field_commentnickname']); ?>
      </p>

and i added this code to css file 

.comment .submitted .comment-name {
  font-size: 4.2em;
  color: #68696b;
}

but the css doesn't work , plz need help.

⋅ Categories: Drupal 7.x

Comments

edward.radau’s picture

edward.radau commented

Did you clear cache? If so did you also make sure that the CSS file you added these lines to is being included within the page?

There's also the potential issue with the selector itself. ".comment .submitted .comment-name" Is that the correct hierarchy?

These are the things I would doube-check with.

Also most browser debugging tools (via F12) and inspecting these elements will help determine whether your CSS is being applied to them.

JoeyRoth’s picture

JoeyRoth commented

hi edward, i think everything is correct, i would like to show you the files 

?>
<div class="<?php print $classes; ?> clearfix"<?php print $attributes; ?>>

  <div class="attribution">

    <?php print $picture; ?>

    <div class="submitted">
    
      <p class="comment-name">
        <?php print render($content['field_commentnickname']); ?>
      </p>
      <p class="comment-time">
        <?php print format_date($comment->created, 'custom', "Y.m.d  H:i"); ?>
      </p>
      <p class="comment-permalink">
        <?php print $permalink; ?>
      </p>
    </div>
  </div>

  <div class="comment-text">
    <div class="comment-arrow"></div>



    

    <?php print render($title_prefix); ?>
    <?php print render($title_suffix); ?>

    <div class="content"<?php print $content_attributes; ?>>
      <?php
        // We hide the comments and links now so that we can render them later.
        hide($content['links']);
        print render($content);
      ?>
      <?php if ($signature): ?>
      <div class="user-signature clearfix">
        <?php print $signature; ?>
      </div>
      <?php endif; ?>
    </div> <!-- /.content -->

    <?php print render($content['links']); ?>
  </div> <!-- /.comment-text -->
</div>



.comment div.user-picture img {
  margin-left: 0; /* LTR */
}
.comment {
  margin-bottom: 20px;
  display: table;
  vertical-align: top;
}
.comment .attribution {
  display: table-cell;
  padding: 0 30px 0 0; /* LTR */
  vertical-align: top;
  overflow: hidden;
}
.comment .attribution img {
  margin: 0;
  border: 1px solid #d3d7d9;
}
.comment .submitted p {
  margin: 4px 0;
  font-size: 1.071em;
  line-height: 1.2;
}
.comment .submitted .comment-name {
  font-size: 4.2em;
  color: #68696b;
}
.comment .submitted .comment-time {
  font-size: 1.2em;
  color: #68696b;
}
.comment .submitted .comment-permalink {
  font-size: 1.2em;
  text-transform: lowercase;
}
.comment .content {
  font-size: 1.5em;
  line-height: 1.6;
}
.comment .comment-text {
  padding: 10px 25px;
  border: 2px solid #d3d7d9;
  display: table-cell;
  vertical-align: top;
  position: relative;
  width: 100%;
}
.comment .indented {
  margin-left: 40px; /* LTR */
}
.comment ul.links {
  padding: 0 0 0.25em 0;
}
.comment ul.links li {
  padding: 0 0.5em 0 0; /* LTR */
}
.comment-unpublished {
  margin-right: 5px; /* LTR */
  padding: 5px 2px 5px 5px; /* LTR */
}
.comment-unpublished .comment-text .comment-arrow {
  border-left: 1px solid #fff4f4;
  border-right: 1px solid #fff4f4;
}

sites\all\themes\specialone\css/style.css

edward.radau’s picture

edward.radau commented

Do none of the styles work at all or is just that one you added? If none of them work then I'd wager the style isn't loaded. Otherwise most likely the CSS selector is wrong and the specificity you're using is off. As a test try changing it to this just to see if it works:

.comment-name {
  font-size: 4.2em;
  color: #68696b;
}

I did notice this:

sites\all\themes\specialone\css/style.css

Is that the way you pasted it or is that the actual path Drupal is using in an attempt to load your CSS? The path appears invalid and could be causing issues.

JoeyRoth’s picture

JoeyRoth commented

hi edward,

I've done everything you told me, but nothing changed

all other codes working good,i've added those codes and it works good : 

span.form-required {
  display: none;
}

.navbar .nav > li {
    float: right;
}

.feed-icon img {
display: none;
}

.search-info {
display: none;
}

just the comment code is not working

the path i posted is the actual path, the full path is C:\xampp\htdocs\MYWEBSITE\sites\all\themes\specialone\css\style.css

i'm sure is the correct path, the problem is between css file and template file

edward.radau’s picture

edward.radau commented

Hmm, so far the only other thing I can think of is Browser Cache. Try loading up the site in another browser or clear your existing one. Check if you see any changes from there.

JoeyRoth’s picture

JoeyRoth commented

i clear the cache everytime i make changes in files. and i changed the browser but same problem.

i know where is the problem exactly but i don't know the solution, the problem is in the field i added, because there is relation between the code i added to template file and the field.

1- i created a new field in comment fields (admin/structure/types/manage/article/comment/fields) the name of the new field is (commentnickname) so the field Machine name is (field_commentnickname)

2- then i added the codes to template file and css file.

and i just added new codes to css file it works

so the problem is because the field but can't know where is the problem exactly