Welcome to the Question2Answer Q&A. There's also a demo if you just want to try it out.
+5 votes
47.0k views
in Themes by
Hello All,
 
''Recent questions and answers'' text on home page have h1 css class tag, 
How i can change from h1 to e.g. ''something'' which file i need edit ?
 
Thanks.

3 Answers

+2 votes
by
selected by
 
Best answer

It is not quite clear what you're looking for. It seems you want to apply a different CSS style to the h1 tag of the QA section. By different I mean you want to keep the default to the rest of the site. You can't do that without getting your hands dirty and perform a small core hack. You could do this by means of a theme but it will be a bit more complicated.

So here are the steps to add a CSS class only to that section:

1. Open file qa-include/qa-theme-base.php
2. Perform the changes I've made in this Gist:

	

  if (isset($favorite))

	

      $this->output('<form '.$favorite['form_tags'].'>');

	

 

	

- $this->output('<h1>');

	

+ $class = $this->template === 'qa' ? ' class="recent-questions"' : '';

	

+

	

+ $this->output('<h1' . $class . '>');

	

  $this->favorite();

	

  $this->title();

	

  $this->output('</h1>');
3. Open file qa-theme/<your-theme>/qa-styles.css and add the style you want to the recent-questions class:
 
h1.recent-questions {
    color: red;
}

 

by
Thanks for answer, i need special class tag just for this:

''Recent questions and answers''

not for all ''h1'' but i can't found in code where is ''Recent questions and answers'' for change this, this you solution will change all ''h1'' to something other i need only for this top text on home page

Thanks.
by
"this you solution will change all ''h1''" => That is not correct. As I've explained in my answer, this will only apply the new CSS class to that section
by
edited by
this work thanks
by
edited by
but problem is now other section like ''Hot questions'' , ''Users'' ... is again same old h1 how i can on easy way edit and this ?

Thanks.
by
edited by
Well, you asked for the Recent questions... Templates are not documented and I don't think there is any list or easy way to see them all. The best thing you can do is to output the current template and navigate the site. Then you'll know which template you're seeing. This Gist has that code https://gist.github.com/pupi1985/1578f39e2ef38fa2d065 . As you can see the 'qa' stands for the 'qa' template. When you find a template you want to apply a custom style just copy the template name from the webpage and add a new case statement which, instead of 'qa' will contain that value and then add the line with the $class and the line with the break. So 3 lines per template you want to change.

Also note in the gist you can change the h1 for an h2, h3  or a div, as long as it is only 1 tag it will work.
by
i can't open gist code
by
it's the same as before
by
Can you please tell me how change css class for ''question title'' on question page e.g. here
http://s30.postimg.org/lfoa7mnpd/image.png
this is why i want change all this because i want ''hot'' , ''users'' have other color then ''question title'' on question page maybe is much easer just change this ''question title'' on question page ?

Thanks.
by
This is the CSS class that affects question titles: .entry-title
This site has the following class defined in the css:
.entry-title{
    color:#000;
    font-family:Arial,Helvetica,sans-serif;
    font-weight:700;
}
by
this fix all,

Thanks.
0 votes
by
First open qa-theme/Snow/qa-styles.css and find h1 now you should see the h1 under /* Headings */
by
i need change css class for '''Recent questions and answers'' to some other but i can't found file where i can do this ?
+1 vote
by

If you really want to change tag than follow pupi1985 answer. But If you just want to style differently and tag doesn't matter than you just need to target the body tag. See example below

.qa-template-qa .qa-main h1:first-of-type{
    
    /* add your styling here */
    background-color: #ccc;
    color: green;
    margin: 0 0 10px 0;

    /* if overridden rule doesn't work than use !important */
    background-color #ccc !important;

}

 

by
thanks for the tip :) . It is helpfull .
by
Glad to share.. :)
by
Bot how did you have written the css part that is showing as Highlighted . Where is the option in this site . Could you please let me know ??
by
Ohh . Might be copying a code from a github will be displayed like that
...