Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

#1 2020-08-27 22:31:57

gu
Member
Registered: 2020-08-27
Posts: 47

N00b Q. re. coding default page from zero

Background:
- I am here because I like the textpattern concept and think it would be good for a co-collaborative space for shared and interlinked knowledge.
- I don’t know much code but am determined to learn enough to create something simple I can use and can offer to others (if I succeed in making the simple page!)
Question:
How can I get my search bar aligned right? I want it to be in the same line as my txp home link and my logo, which it currently is, except it is currently aligned centre.
Here is the HTML:


<div class="header">
<header id="masthead">
  ...etc...
 <a id="search"><span style="align:right"><txp:search_input /></span></a>
</div>         

Please note that I added the span out of desperation.
Here is the CSS:

header#masthead {
	display: flex;
	align-items: center;
	max-width: 69em;
	margin: 3em auto;
	padding: 0 1em;
}
header#masthead a {
	border-bottom: unset;
}

Thank you for your time!


<!— space for hope —>

Offline

#2 2020-08-28 08:52:55

gaekwad
Admin
From: People's Republic of Cornwall
Registered: 2005-11-19
Posts: 3,234

Re: N00b Q. re. coding default page from zero

I can’t help with your CSS stuff (I’m out of practice), but welcome aboard!

Offline

#3 2020-08-28 09:13:54

zero
Member
From: Lancashire
Registered: 2004-04-19
Posts: 1,391
Website

Re: N00b Q. re. coding default page from zero

Here’s how I have it. You should be able to play around and alter classes, margins, widths, heights to suit.

<div class=“header-wrap”>
<header class=“site-header”>
<h1 itemscope itemtype=“https://schema.org/Organization”><a class=“logo” itemprop=“Brand” href=”<txp:site_url />”><txp:site_name /></a>
</h1> <txp:search_input />
</header>
</div>

And the CSS:

.header-wrap { height: 200px; width: 100%; margin: 0 auto; } .site-header { width: 95%; margin: 0 auto; padding: 0; max-width: 880px; } .search { position:relative; float:right; margin-right: 0; margin-top:0; padding: 0; }


Wondrous Healing Wondrous ways to a healthy old age
Safe Reiki Harmless natural healing.
Gud One Blog

Offline

#4 2020-08-28 09:24:20

gu
Member
Registered: 2020-08-27
Posts: 47

Re: N00b Q. re. coding default page from zero

@gaekwad – thank you for the welcome!

@zero – thank you so much!
(It will take me a mo’ to digest what you wrote, but super grateful, cheers.)

Last edited by gu (2020-08-28 09:25:33)


<!— space for hope —>

Offline

#5 2020-08-28 17:23:28

gu
Member
Registered: 2020-08-27
Posts: 47

Re: N00b Q. re. coding default page from zero

…I feel very embarrassed to see that I did not specify I meant in the same horizontal line.
But the good thing is that I learned about itemscope.
I am definitely over my head but something is compelling me to keep at it – but I will trust someone will tell me if they think I should go to a more basic place than here, which has the extra txp dimension.


<!— space for hope —>

Offline

#6 2020-08-28 17:30:30

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 8,348
Website

Re: N00b Q. re. coding default page from zero

gu wrote #325643:

…I feel very embarrassed to see that I did not specify I meant in the same horizontal line.
But the good thing is that I learned about itemscope.
I am definitely over my head but something is compelling me to keep at it – but I will trust someone will tell me if they think I should go to a more basic place than here, which has the extra txp dimension.

itemscope is extra fluff for many, but excellent for accessibility and structuring html documents. Do keep it up as it will help you long term.

There is no issue with us helping the building txp powered sites. This includes, discussing css, html, accessibility, SEO, js and php. It will be a learning curve, but we are all on it.


Yiannis
——————————
neme.org | hblack.net | State Machines | NeMe @ github
I do my best editing after I click on the submit button.

Offline

#7 2020-08-28 17:40:11

gu
Member
Registered: 2020-08-27
Posts: 47

Re: N00b Q. re. coding default page from zero

Hi colak, thank you so much for the encouragement – it came at the right time.
Btw – your app really looks to me like a way to make Matuschak/fancier-wiki-style interconnections available large scale.
I hope to be able to make it through this beginner’s stump to contribute something. I am just a tad concerned because of time but try to console myself because I think that my dream page is not too ambitious. OK – back to work…


<!— space for hope —>

Offline

#8 2020-08-28 17:56:53

zero
Member
From: Lancashire
Registered: 2004-04-19
Posts: 1,391
Website

Re: N00b Q. re. coding default page from zero

The code was for a horizontal line. You can see how I used that code here. If you also wanted a logo image in the centre on the same horizontal line, you would put a position:relative on the containing element and then a position:absolute on the logo image, with a top: 0; text-align:center or something along those lines. (A lot depends on the context of where you are positioning it because Cascading Style Sheets cascade — ie they affect other elements above, below and around them.)

The default Textpattern theme can help a lot, you can copy paste bits of it, or even use it all with alterations to suit your needs. If you follow that link, click on the dist/four-point-nine folder, then the styles folder you can see the CSS for the Textpattern demo site. This has an interesting navigation bar and search icon all on the same horizontal line. You could use that code but replace the navigation with your site name and logo.

I used to be a newbie and am useless at programming but I can manage HTML and CSS, and learned by trial and error, copy and paste. But I’m not a professional and probably a website with basic tuition of HTML and CSS may have been better in the long run. But this is a friendly forum, so don’t be afraid to ask. If you’d like to post your code we can look at it and see why it isn’t horizontal.


Wondrous Healing Wondrous ways to a healthy old age
Safe Reiki Harmless natural healing.
Gud One Blog

Offline

#9 2020-08-28 18:23:14

zero
Member
From: Lancashire
Registered: 2004-04-19
Posts: 1,391
Website

Re: N00b Q. re. coding default page from zero

Sorry if I’m giving you too much to think about but there’s one point I noticed. In the code you posted, it is not standard Textpattern code — so have you tried installing Textpattern yet? If you have and tried it out, then that’s fine, and you can use any code you like. But if you haven’t, I recommend installing Textpattern because the default theme has lots of comments with the pages and forms which helps you with tags, and also plenty of comments in the stylesheet. I think it’s worth while working your way through code bit by bit to get an understanding of how things fit together.

Also <txp:search_input /> produces a lot of code you may not know about. To see it, look at the page source of a web page made with Textpattern (usually Ctrl + U brings up the source). You will see amongst other things it uses the .search class which is the one you need for positioning.

I hope that helps. Take your time – there’s a lot to learn – enjoy yourself!


Wondrous Healing Wondrous ways to a healthy old age
Safe Reiki Harmless natural healing.
Gud One Blog

Offline

#10 2020-08-28 18:27:28

gu
Member
Registered: 2020-08-27
Posts: 47

Re: N00b Q. re. coding default page from zero

Thank you zero! I am also encouraged by the fact that your approach is the same as mine… (my argument to self being I am not trying to sell my services as designer but, if I can quote an IndieWeb ideal, designing as I go for my own purposes – and (hopefully!) leave a trail for others if they find it useful…)
I am currently having a problem which may be host-based, wherein my browser is no longer registering the changes I make. I hope I have not broken anything and am being careful with opening and closing commands… I have also tried a hard refresh as per Fabric Digital’s browser instructions.
It just occurred to me to ask (if I may ask you another question, sorry) whether I supposed to be practising somewhere else, and not ‘live’ on my actual site?


<!— space for hope —>

Offline

Board footer

Powered by FluxBB