Giter Site home page Giter Site logo

Comments (12)

bobbingwide avatar bobbingwide commented on September 28, 2024

I cloned the live site on 19th March. The most recent post ( a bigram ) was Seize Bees, in Category: Sound Bound, s-word: seize, b-word: bees.

The heading and main menu is
image

The first half of the first post on the home page is
image

The bottom of the post is
image

The next block of posts displays thumbnails in up to 4 complete rows of 4 posts.
image

The final block are the posts that don't have images followed by pagination.
image

  • There's a sidebar with 4 widgets
  • and a full width footer area with 3 widgets
  • then another centralised widget with site and copyright info.

from sb.

bobbingwide avatar bobbingwide commented on September 28, 2024

Attempt to style using the Site Editor ( beta ).

I tried to style the header using the Site Editor but had to resort to using style.css for a few reasons

  1. I had major problems with WordPress ( well PHP ) rejecting my experimental-theme.json due to a syntax error that PhpStorm wasn't reporting.
  2. I needed to use CSS that Gutenberg isn't designed to work with.
  3. The assets/alignments-front.css, generated by new-empty-theme.php was more of a hindrance than a help. Alignment of blocks is still a mystery. I'm not at all sure how much success I'm going to have with the sidebar.

from sb.

bobbingwide avatar bobbingwide commented on September 28, 2024

Styling the menu was the next challenge.

  • I copied the CSS from the genesis-SB theme.
  • I changed some of the selectors from .nav-primary to nav and .genesis-nav-menu to .wp-block-navigation or .wp-block-navigation__container
  • then had to add a few more bits to override the default settings for the navigation menu.

I haven't yet managed to:

  • been able to align the menu in the center, as shown here from the original.
  • style the sub-menu items

image

The other challenge with the sub menus is that they're created using the menu-in-menu plugin, which loads up submenus from another menu. The first 4 items have submenu items which are defined in other menus. The last item ( SB ) doesn't have submenu items.
image

I haven't yet tried to achieve the correct menu highlighting, as done for Fizzie.

from sb.

bobbingwide avatar bobbingwide commented on September 28, 2024

Re: creating the first post on the home page... I think I'll create the problems I had as a separate issue.

from sb.

bobbingwide avatar bobbingwide commented on September 28, 2024

After I accidentally deleted the database version of index.html, while attempting to develop 404.html for #FSE-outreach-experiment call #3, I reinstated the menu and found the button to center align it.

from sb.

bobbingwide avatar bobbingwide commented on September 28, 2024

But then I updated to Gutenberg-WordPress-source and the menu styling changed
image

Some extra padding or margin has appeared.
Note: I had fixed the problem where the right padding was less than the left padding when the menu item wasn't selected, but that's gone wrong again, except for the last item ( SB ) which doesn't have a submenu.

from sb.

bobbingwide avatar bobbingwide commented on September 28, 2024

It also appears that the padding in the header has changed a bit. Either the search box is lower or the site logo and site title are higher.

from sb.

bobbingwide avatar bobbingwide commented on September 28, 2024

Develop a singular template with post-author, metadates, etc

Raised a separate issue. #20

from sb.

bobbingwide avatar bobbingwide commented on September 28, 2024

Develop a 404 page early on ... for the #fse-outreach-experiment

Well, that was the plan in 2021. It's time to raise a new issue to Develop a 404 page.
Raised a separate issue #22

from sb.

bobbingwide avatar bobbingwide commented on September 28, 2024

Incorporate the react-SB page as a block

Raised a separate issue #25

from sb.

bobbingwide avatar bobbingwide commented on September 28, 2024

Sb v0.2.1 was installed on seriouslybonkers.com on 11th May 2022 with the latest version of:

  • bigram ( v0.4.1 )
  • Gutenberg ( v 13.1.0 )
  • other plugins that deliver required functionality

I've updated a number of pages to match the local changes in s.b/bigram.

It's working as expected, with some minor styling issues on my iPhone 13 mini:

  • metadates wrapping
  • no margins
  • drop down menu styling for Sulphurous Brewmasters and Some Background
  • font for tables could be smaller and/or horizontal scrolling supported
  • Site Building menu minimises to hamburger

from sb.

bobbingwide avatar bobbingwide commented on September 28, 2024

It's working as expected, with some minor styling issues on my iPhone 13 mini:

I've raised #33 to address this. Closing the original issue

from sb.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.