Css issue

Help Customization
1

Hello, I have several questions to ask about the modification of the css code.

  1. is it possible to pin a post as a menu/category/guide, which is not only show the first line (title), but the entire content in this post?
    If not, is it possible to write a css code which makes a menu/category/guide that is always shown on each page?

  2. I changed the width of the blog but the footer stayed the same. there’s a grey line which is shorter than the post content now. And the paging indicator (older, newer) is not on the side but a bit in the middle. (see the picture below)
    how can I change the code to make it looks like the lower part of the picture?

  3. on the hashtag page, the font size is too big and the position is a bit at nowhere.
    how can I change the code to make it looks like the lower part of the picture?

    Screenshot 2022-05-22 at 20.19.26
    Screenshot 2022-05-22 at 20.19.263443×1636 268 KB

Thanks！

2

do you have a link to your post to get a better example? The best way to go about it is to use the browser ‘inspector’ and play arond with the CSS until you get what you want and then use that new css and add that to your install. I have a hard time understanding what you are trying to do. If you can put the URL so that it would be simpler to point out what css needed to be added.

3

for the first question I wanted to make the pin post to a direct link to a hashtag page as this post discussed: Active link to other webpage in Pinned Post on landing page? - #7 by cjeller1592
but there’s no ‘Custom Javascript’ opinion on the backstage. I don’t know if there’s a way to modify only with the css code.

for the other two questions I just don’t know how to call those parameters. How the css code define the grey line which separates the articles and footer area?
I changed the width of the article and footer area like below, but the grey line is not included.
And how to move the paging indicator (older/newer) aligned with the width of the article？

#wrapper, #collection article, #post article, #subpage article{
max-width: 720px !important;
margin-top: 0px !important;
margin-bottom: 75px !important;
padding-right: 0px !important;
padding-left: 0px !important;
line-height: 24PX !important;
margin-right: auto; /* 1 /
margin-left: auto; / 1 */
}

body footer, nav #page {
max-width: 1100px !important;
margin-right: auto; /* 1 /
margin-left: auto; / 1 */
text-align: center;
padding: 0 2em;
background-color: #f6f6f6;

Here is the post：ハンミョウ — 写意 Writee

The third question is that how can I change the font size of the hashtag on top of the each hashtag page？

4

  1. you would need to add some javascript to your template file. At this point I am unclear what template file has to be editing (I’m also new to that part of writefreely)

  2. grey line is:
    footer hr {width:100%}
    For the paging indicator:
    body#collection #paging {padding:0px }

  3. The hashtag page seems to be on a page called :
    body id="subpage"
    Now the tag is surrounded by a h1, so body#subpage h1 {font-size: … } should do the trick although I am not sure if there are other #subpage …

5

Thank you! The code for the paging indicator is working now.

footer hr {width:100%}
has to be:
footer hr {max-width:100% !important;}

The hashtag didn’t change.

6

Do you know how to use the browser inspector? Right click inspect, so that you can get the right class for the item you are trying to change. When I use the inspector on your site I am able to change the code for the item

#wrapper > h1:nth-child(1)

But that’s too wide, so you have to use something to make it more specific. You can try #subpage h1 too, or #subpage h1:nth-child(1) … you have to play around a bit :smiley: